當(dāng)元素脫離文檔流時(shí)狼电，會出現(xiàn)什么問題呢蜒灰？我們先看看下面這個(gè)例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8>"
<title></title>
<style type="text/css">
.box1{
border:10px red solid;/*為box1設(shè)置一個(gè)邊框*/
}
.box2{
width: 100px;
height: 100px;
background-color:blue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
我們可以看到，在文檔流中肩碟，父元素的高度默認(rèn)是被子元素?fù)伍_的强窖。但是如果我們給box2設(shè)置一個(gè)浮動，會出現(xiàn)什么情況呢削祈？
當(dāng)我們給子元素設(shè)置浮動后翅溺，子元素完全脫離文檔流，此時(shí)會導(dǎo)致子元素?zé)o法撐起父元素的高度髓抑。這也是我們接下來要討論的問題——高度塌陷咙崎。
由于父元素的高度塌陷，則父元素下的所有元素都會向上移動吨拍，這樣會導(dǎo)致頁面布局混亂褪猛。如果我們給父元素設(shè)置一個(gè)和子元素一樣的高度，從效果來看似乎避免了高度塌陷問題羹饰。但是如果子元素的高度改變了伊滋，我們會發(fā)現(xiàn)這個(gè)問題并沒有實(shí)質(zhì)性的解決。父元素并不能自動適應(yīng)子元素高度队秩，因此不建議使用這種方法新啼。
根據(jù)W3C的標(biāo)準(zhǔn)，在頁面中元素都有一個(gè)隱含的屬性叫做Block Formatting Context刹碾，簡稱BFC。該屬性可以設(shè)置打開或者關(guān)閉（默認(rèn)關(guān)閉）座柱。當(dāng)開啟元素的BFC后迷帜，元素將會具有如下特征：
1、父元素的垂直外邊距不會和子元素重疊
2色洞、開啟BFC的元素不會被浮動元素所覆蓋
3戏锹、開啟BFC的元素可以包含浮動的子元素
如何開啟元素的BFC
1、設(shè)置元素浮動
2火诸、設(shè)置元素絕對定位
3锦针、設(shè)置元素為inline-block
4、將元素的overflow設(shè)置為一個(gè)非visible的值
前面兩種方法雖然可以撐開父元素置蜀，但是會導(dǎo)致父元素寬度丟失奈搜，并且下邊的元素也會上移，不能解決問題盯荤。第三種可以解決問題馋吗，但是會導(dǎo)致寬度丟失。第四種方法可以達(dá)到我們想要的效果秋秤，是副作用最小的BFC開啟方式宏粤。
overflow:auto;/*overflow:hidden;也可以脚翘，但是在IE6及以下瀏覽器中不支持BFC*/
在IE6中有一個(gè)類似于BFC的隱含屬性hasLayout，可以通過將元素的zoom設(shè)置為1開啟绍哎。
如果我們定義了多個(gè)div来农，若有div使用了浮動，將會對下面的元素產(chǎn)生影響崇堰，我們可以使用clear來清除其它浮動元素對當(dāng)前元素的影響沃于。清除浮動后，元素回到其它元素浮動前的位置赶袄。
clear可選值：none揽涮，默認(rèn)值，不清除浮動饿肺；left蒋困，清除左側(cè)浮動元素對當(dāng)前元素的影響；right敬辣，清除右側(cè)浮動元素對當(dāng)前元素的影響雪标；both，清除兩側(cè)浮動元素對當(dāng)前元素的影響溉跃。
clear只能對兄弟塊起作用村刨，那如何解決父子塊元素之間產(chǎn)生的高度塌陷問題呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
border:1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float:left;
}
.box3{
clear:both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
我們可以在高度塌陷的父元素最后添加一個(gè)空白的div撰茎，對其進(jìn)行清除浮動嵌牺，這樣可以通過空白的div來撐開父元素的高度。這種方式雖然可以解決問題龄糊，但是會在頁面添加多余的結(jié)構(gòu)逆粹。我們可以通過after偽類，選中box1的后邊來清除浮動炫惩，這樣就不會在頁面添加多余的div僻弹。
.clearfix::after{
content:"";/*添加一個(gè)內(nèi)容*/
display:block;/*轉(zhuǎn)換為一個(gè)塊元素*/
clear:both;/*清除兩側(cè)浮動*/
}
