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容器下，讓他們相互隔離，不會影響。