Bootstrap清除浮動的實現原理

whale發表於2017-02-21
boot

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

相關文章