Boostrap清除浮動的css如下：
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/**
* For IE 6/7 only
*/
.clearfix {
*zoom: 1;
}
- :after偽類在元素末尾插入了一個包含空格的字符辉巡，并設置display為table
- display:table會創(chuàng)建一個匿名的table-cell讼油，從而觸發(fā)塊級上下文（BFC）驯遇，因為容器內(nèi)float的元素也是BFC畸悬，由于BFC有不能互相重疊的特性正什，并且設置了clear: both夫嗓，:after插入的元素會被擠到容器底部简识，從而將容器撐高。并且設置display:table后忿危，content中的空格字符會被渲染為0*0的空白元素达箍，不會占用頁面空間。
- content包含一個空格铺厨，是為了解決Opera瀏覽器的BUG缎玫。當HTML中包含contenteditable屬性時，如果content沒有包含空格解滓，會造成清除浮動元素的頂部赃磨、底部有一個空白（設置font-size：0也可以解決這個問題）。
- :after偽類的設置已經(jīng)達到了清除浮動的目的洼裤，但還要設置:before偽類邻辉，原因如下
- :before的設置也觸發(fā)了一個BFC，由于BFC有內(nèi)部布局不收外部影響的特性腮鞍，因此:before的設置可以阻止margin-top的合并值骇。
- 這樣做，其一是為了和其他清除浮動的方式的效果保持一致移国；其二吱瘩，是為了與ie6/7下設置zoom：1后的效果一致（即阻止margin-top合并的效果）。
- zoom: 1用于在ie6/7下觸發(fā)haslayout和contain floats
