在文檔流中旨剥，父元素的高度默認(rèn)是被子元素?fù)伍_(kāi)的，也就是子元素多高浅缸，父元素就多高
但是當(dāng)為子元素設(shè)置浮動(dòng)以后轨帜，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度衩椒，導(dǎo)致父元素的高度塌陷
由于父元素的高度塌陷了蚌父，則父元素下的所有元素都會(huì)向上移動(dòng)，這樣將會(huì)導(dǎo)致頁(yè)面布局混亂
所以在開(kāi)發(fā)中一定要避免出現(xiàn)高度塌陷的問(wèn)題,
我們可以將父元素的高度寫死毛萌，以避免塌陷的問(wèn)題出現(xiàn)梢什，
但是一旦高度寫死，父元素的高度將不能自動(dòng)適應(yīng)子元素的高度朝聋，所以這種方案是不推薦使用的
BFC:
開(kāi)啟后具有的特點(diǎn)：
1.父元素的垂直外邊距不會(huì)和子元素重疊
2.開(kāi)啟BFC的元素不會(huì)被浮動(dòng)元素覆蓋
3.開(kāi)啟BFC的元素可以包含浮動(dòng)的子元素
如何開(kāi)啟元素的BFC
1.設(shè)置元素浮動(dòng)
2.設(shè)置元素定位
3設(shè)置元素為inlne_block
4.將元素的overflow設(shè)置為一個(gè)非visible的值
推薦方式：將overflow設(shè)置為hidden是副作用最小的開(kāi)啟BFC的方式
但是在IE6及以下的瀏覽器中并不支持BFC，所以使用這種方式不能兼容IE6
在IE6中雖然沒(méi)有BFC囤躁，但是具有另一個(gè)隱含的屬性叫做hasLayout冀痕，該屬性的作用和BFC類似荔睹，所在IE6瀏覽器可以通過(guò)開(kāi)hasLayout來(lái)解決該問(wèn)題
開(kāi)啟方式很多，我們直接使用一種副作用最小的：
直接將元素的zoom設(shè)置為1即可
zoom表示放大的意思言蛇，后邊跟著一個(gè)數(shù)值僻他，寫幾就將元素放大幾倍
zoom:1表示不放大元素，但是通過(guò)該樣式可以開(kāi)啟hasLayout
zoom這個(gè)樣式腊尚，只在IE中支持吨拗，其他瀏覽器都不支持
清除浮動(dòng)：
.box1{
width: 100px;
height: 100px;
background-color: yellow;
/*設(shè)置box1向左浮動(dòng)*/
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: yellowgreen;
/*
由于受到box1浮動(dòng)的影響，box2整體向上移動(dòng)了100px
我們有時(shí)希望清除掉其他元素浮動(dòng)對(duì)當(dāng)前元素產(chǎn)生的影響婿斥，這時(shí)可以使用clear來(lái)完成功能
可選值：
none劝篷，默認(rèn)值，不清除浮動(dòng)
left民宿，清除左側(cè)浮動(dòng)元素對(duì)當(dāng)前元素的影響
right娇妓，清除右側(cè)浮動(dòng)元素對(duì)當(dāng)前元素的影響
both，清除兩側(cè)浮動(dòng)元素對(duì)當(dāng)前元素的影響
清除對(duì)他影響最大的那個(gè)元素的浮動(dòng)
*/
/*
清除box1浮動(dòng)對(duì)box2產(chǎn)生的影響
清除浮動(dòng)以后活鹰，元素會(huì)回到其他元素浮動(dòng)之前的位置
*/
/*clear: left;*/
float: right;
}
.box3{
width: 300px;
height: 300px;
background-color: skyblue;
clear: both;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
解決高度塌陷：
解決高度塌陷方案二：
可以直接在高度塌陷的父元素的最后哈恰，添加一個(gè)空白的div，由于這個(gè)div并沒(méi)有浮動(dòng)志群，所以他是可以撐開(kāi)父元素的高度的
然后再對(duì)其進(jìn)行清除浮動(dòng)着绷，這樣可以通過(guò)這個(gè)空白的div來(lái)?yè)伍_(kāi)父元素的高度，基本沒(méi)有副作用
使用這種方式雖然可以解決問(wèn)題锌云，但是會(huì)在頁(yè)面中添加多余的結(jié)構(gòu)
.clear{
clear: both;}
通過(guò)after偽類荠医，選中box1的后邊*/
/*
可以通過(guò)after偽類向元素的最后添加一個(gè)空白的塊元素，然后對(duì)其清除浮動(dòng)宾抓，
這樣做和添加一個(gè)div的原理一樣子漩，可以達(dá)到一個(gè)相同的效果，
而且不會(huì)在頁(yè)面中添加多余的div石洗，這是我們最推薦使用的方式幢泼，幾乎沒(méi)有副作用
*/
.clearfix:after{
/*添加一個(gè)內(nèi)容*/
content: "";
/*轉(zhuǎn)換為一個(gè)塊元素*/
display: block;
/*清除兩側(cè)的浮動(dòng)*/
clear: both;
/*在IE6中不支持after偽類,所以在IE6中還需要使用hasLayout來(lái)處理*/
.clearfix{
zoom: 1;
相對(duì)定位：
定位：
- 定位指的就是將指定的元素?cái)[放到頁(yè)面的任意位置
通過(guò)定位可以任意的擺放元素
- 通過(guò)position屬性來(lái)設(shè)置元素的定位
-可選值：
static：默認(rèn)值，元素沒(méi)有開(kāi)啟定位
relative：開(kāi)啟元素的相對(duì)定位
absolute：開(kāi)啟元素的絕對(duì)定位
fixed：開(kāi)啟元素的固定定位（也是絕對(duì)定位的一種）
當(dāng)元素的position屬性設(shè)置為relative時(shí)讲衫，則開(kāi)啟了元素的相對(duì)定位
1.當(dāng)開(kāi)啟了元素的相對(duì)定位以后缕棵，而不設(shè)置偏移量時(shí)，元素不會(huì)發(fā)生任何變化
2.相對(duì)定位是相對(duì)于元素在文檔流中原來(lái)的位置進(jìn)行定位
3.相對(duì)定位的元素不會(huì)脫離文檔流
4.相對(duì)定位會(huì)使元素提升一個(gè)層級(jí)
5.相對(duì)定位不會(huì)改變?cè)氐男再|(zhì)涉兽，塊還是塊招驴，內(nèi)聯(lián)還是內(nèi)聯(lián)
當(dāng)開(kāi)啟了元素的定位（position屬性值是一個(gè)非static的值）時(shí)，可以通過(guò)left right top bottom四個(gè)屬性來(lái)設(shè)置元素的偏移量
left：元素相對(duì)于其定位位置的左側(cè)偏移量
right：元素相對(duì)于其定位位置的右側(cè)偏移量
top：元素相對(duì)于其定位位置的上邊的偏移量
bottom：元素相對(duì)于其定位位置下邊的偏移量
通常偏移量只需要使用兩個(gè)就可以對(duì)一個(gè)元素進(jìn)行定位枷畏，
一般選擇水平方向的一個(gè)偏移量和垂直方向的偏移量來(lái)為一個(gè)元素進(jìn)行定位
絕對(duì)定位：
當(dāng)position屬性值設(shè)置為absolute時(shí)别厘，則開(kāi)啟了元素的絕對(duì)定位
絕對(duì)定位：
1.開(kāi)啟絕對(duì)定位，會(huì)使元素脫離文檔流
2.開(kāi)啟絕對(duì)定位以后拥诡，如果不設(shè)置偏移量触趴，則元素的位置不會(huì)發(fā)生變化
3.絕對(duì)定位是相對(duì)于離他最近的氮发、開(kāi)啟了定位的祖先元素進(jìn)行定位的（一般情況，開(kāi)啟了子元素的絕對(duì)定位冗懦，都會(huì)同時(shí)開(kāi)啟父元素的相對(duì)定位）
如果所有的祖先元素都沒(méi)有開(kāi)啟定位爽冕，則會(huì)相對(duì)于瀏覽器窗口進(jìn)行定位
4.絕對(duì)定位會(huì)使元素提升一個(gè)層級(jí)
5.絕對(duì)定位會(huì)改變?cè)氐男再|(zhì)：
內(nèi)聯(lián)元素變成塊元素，
塊元素的寬度和高度默認(rèn)都被內(nèi)容撐開(kāi)
/*開(kāi)啟box4的相對(duì)定位*/
/*position: relative;*/
/*開(kāi)啟絕對(duì)定位*/
position: absolute;
