如何理解CSS中的BFC特性

css中的 BFC 特性是在css2.1規範中引入的塊渲染規則，利用這些規則能夠幫助咱們處理頁面中的佈局等問題。好比：在清除浮動方案中咱們能夠在父容器中加入 overflow:hidden，這就是利用了 BFC 特性。同時也是面試中一個常問的知識點，因此深刻理解 BFC 很重要。

什麼是BFC

BFC是 (Block Formatting context)的簡稱，即塊格式化上下文。能夠理解爲它是運用一些渲染規則的塊渲染區域，它是css世界中的結界。爲什麼說是結界，由於在觸發了 BFC 特性的容器下元素和容器外部元素徹底隔離，子元素的佈局不會影響外部元素，反之依然。

BFC 元素有以下一些特徵：

• BFC的塊不會和浮動塊重疊

• 計算BFC元素的高度時，會包括浮動元素

• 在一個BFC下的塊 margin 會發生重疊，不在同一個則不會

• BFC元素是一個獨立的容器，使得裏面的元素和外部元素隔離開，互補影響

觸發BFC

經過如下設置能夠觸發一個塊元素的BFC特性：

• float 的值不爲 none

• overflow 的值爲 auto, scroll和 hidden

• display 的值爲 table-cell, table-caption和 inline-block

• position 設置爲 absolute和 fixed

除此以外， html 元素自己默認就是一個 BFC 元素

應用場景

清除浮動

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
複製代碼

.box {
    background: #eee;
}
.left {
    width: 200px;
    height: 200px;
    float: left;
    border: 1px solid pink;
}
.right {
    height: 100px;
    border: 1px solid greenyellow;
}
複製代碼

效果以下：

可見，浮動元素 .left脫離了正常流，和元素 .right發生了重疊。並且父容器的高度不包含浮動元素，發生了坍塌。

利用 BFC 元素的特徵2，在包含浮動元素的容器觸發 BFC 特性，防止容器的高度發生坍塌。通常是設置 overflow:hidden 來觸發，以下：

.box {
    background: #eee;
    /* 觸發bfc */
    overflow: hidden;
}
複製代碼

效果以下：

自適應佈局

利用特徵1，咱們能夠對 .right 觸發 BFC 特性，讓他不和左邊的浮動元素重疊，確保子元素不受到外部影響。同時由於 .right 是一個塊元素，具備流體的特性，會隨着視口寬度變化發生自適應，從而實現兩欄自適應，甚至多欄也是如此。

.right {
    height: 100px;
    border: 1px solid greenyellow;
    overflow: hidden;
}
複製代碼

效果以下：

可是對於超出 .right 區域須要顯示內容的場景，這種方案就不適用了。能夠利用 table-cell 和 inline-block 觸發 BFC 特性。

.right {
    display: table-cell;
    width: 9999px;
    height: 100px;
    border: 1px solid greenyellow;
    /* 利用 css hack 兼容IE7 的狀況 */
    *display: inline-block;
    *width: auto;
}
複製代碼

對於單元格的盒子有一個特色，就是設置的寬度超過父容器時，實際寬度也是不會超過父容器的，這就和自適應效果同樣。因此咱們給寬度設置了一個超大值。可是table-cell 只使用於IE8+的瀏覽器，對於須要考慮IE7的狀況，能夠利用設置 inline-block ，它在IE7上表現的和 block 盒同樣，也是會自適應的。

其餘觸發 BFC 特性的條件都有本身的約束，因此經常使用的就是上面兩種方案來觸發

防止margin合併

咱們知道兩個相鄰的塊盒會發生 margin 合併，以最大的爲準。因此利用 BFC 特性3，讓其中一個塊盒包含在一個新的BFC容器下，讓他們相互隔離，不會影響。

參考文章

CSS深刻理解流體特性和BFC特性下多欄自適應佈局

學習 BFC (Block Formatting Context)

史上最全面、最透徹的BFC原理剖析