Bootstrap清除浮動的實現原理

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會建立一個匿名的table-cell，從而觸發塊級上下文（BFC），由於容器內float的元素也是BFC，因爲BFC有不能互相重疊的特性，而且設置了clear: both，:after插入的元素會被擠到容器底部，從而將容器撐高。而且設置display:table後，content中的空格字符會被渲染爲0*0的空白元素，不會佔用頁面空間。

  • content包含一個空格，是爲了解決Opera瀏覽器的BUG。當HTML中包含contenteditable屬性時，若是content沒有包含空格，會形成清除浮動元素的頂部、底部有一個空白（設置font-size：0也能夠解決這個問題）。

• :after僞類的設置已經達到了清除浮動的目的，但還要設置:before僞類，緣由以下

  • :before的設置也觸發了一個BFC，因爲BFC有內部佈局不受外部影響的特性，所以:before的設置能夠阻止margin-top的合併。

  • 這樣作，其一是爲了和其餘清除浮動的方式的效果保持一致；其二，是爲了與ie6/7下設置zoom：1後的效果一致（即阻止margin-top合併的效果）。

• zoom: 1用於在ie6/7下觸發haslayout和contain floats