CSS中的BFC
BFC：block formatting context塊級格式化上下文；
BFC 與清除浮動的關(guān)系
某些屬性值只要出發(fā)了BFC，就可以清除浮動
觸發(fā)BFC的屬性
float,除取值為none的情況;
overflow磁滚，除取值為visible的情況;
display中的table-cell,table-caption,inline-block屬性；
position中的fixed,absolute;
清除浮動的方法
1.在代碼片段的最后添加一個空div標(biāo)簽椭住，并給它設(shè)置clear:both;樣式,解決父級元素的高度塌陷（浮動元素不在文檔流中了）問題支竹；
<div class="content">
<div style="float: left;width: 100%;height: 100px;background-color: #ff0;"></div>
<div class="float: right;width: 100%;height: 100px;background-color: #0f0;"></div>
<div class="clear: both"></div>
</div>
缺點：
可維護(hù)性差,在頁面中創(chuàng)建冗余的元素；
2.給最外層的父元素設(shè)置：overflow: hidden;讓浮動元素回到容器中
.content {overflow: hidden;}
3.讓最外層的父元素也浮動,來清除內(nèi)部浮動
.content {float: left;}
缺點：?
影響頁面布局泳唠，不推薦狈网；
4.使用CSS偽元素:after，給浮動元素的外層容器添加新的class笨腥，在元素的末尾添加一個看不見的塊元素拓哺，但有占位
.clearfix:after{
content:"."; /* 添加內(nèi)容?*/
display:block;/* 生成的元素以塊級元素顯示，占滿空間?*/
height: 0;/* 避免生成的內(nèi)容破壞原有的布局高度*/
clear:both;/* 清除浮動?*/
visibility: hidden;/* 讓元素不可見 */
}
.clearfix{zoom:1;/*兼容IE6,7用于觸發(fā)IE的hasLayout脖母，然后才能清除浮動*/}
5.改進(jìn)方案
.clearfix:before,.clearfix:after{
content:'';
display:table; /* 匿名的表格單元?*/
}
.clearfix:after{clear:both;}
注意：
該方法中加上:before可以防止瀏覽器頂部的空白崩潰士鸥，即是 margin-top與上一個盒子的margin-bottom發(fā)生疊加；
