BFC，塊級格式化上下文，一個創(chuàng)建了新的BFC的盒子是獨立布局的，盒子里面的子元素的樣式不會影響到外面的元素。在同一個 BFC 中的兩個毗鄰的塊級盒在垂直方向（和布局方向有關(guān)系）的 margin 會發(fā)生折疊。
W3C CSS 2.1 規(guī)范中的一個概念，它決定了元素如何對其內(nèi)容進行布局，以及與其他元素的關(guān)系和相互作用。
一、BFC 的概念
1.規(guī)范解釋
塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的區(qū)域，也是浮動元素與其他元素的交互限定區(qū)域。
2.通俗理解
BFC 是一個獨立的布局環(huán)境,可以理解為一個容器,在這個容器中按照一定規(guī)則進行物品擺放,并且不會影響其它環(huán)境中的物品。
如果一個元素符合觸發(fā) BFC 的條件，則 BFC 中的元素布局不受外部影響。
浮動元素會創(chuàng)建 BFC，則浮動元素內(nèi)部子元素主要受該浮動元素影響，所以兩個浮動元素之間是互不影響的。
二、創(chuàng)建 BFC
根元素或包含根元素的元素
浮動元素 float ＝ left | right 或 inherit（≠ none）
絕對定位元素 position ＝ absolute 或 fixed
display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption
overflow ＝ hidden | auto 或 scroll?(≠ visible)
三、BFC 的特性
BFC 是一個獨立的容器，容器內(nèi)子元素不會影響容器外的元素。反之亦如此。
盒子從頂端開始垂直地一個接一個地排列，盒子之間垂直的間距是由 margin 決定的。
在同一個 BFC 中，兩個相鄰的塊級盒子的垂直外邊距會發(fā)生重疊。
BFC 區(qū)域不會和 float box 發(fā)生重疊。
BFC 能夠識別并包含浮動元素，當(dāng)計算其區(qū)域的高度時，浮動元素也可以參與計算了。
四、BFC 的作用
1.包含浮動元素（清除浮動）
浮動元素會脫離文檔流(絕對定位元素也會脫離文檔流)，導(dǎo)致無法計算準(zhǔn)確的高度，這種問題稱為高度塌陷。
解決高度塌陷問題的前提是能夠識別并包含浮動元素，也就是清除浮動。
問題舉例：如上左圖所示，容器（container）沒有高度或者 height = auto ,并且其子元素（sibling）是浮動元素，所以該容器的高度是不會被撐開的，即高度塌陷。
解決方法：在容器（container）中創(chuàng)建 BFC。
HTML
<div class="container">
? ? ? ? <div class="Sibling"></div>
? ? ? ? <div class="Sibling"></div>
</div>
CSS
.container {
? ? ? ? overflow: hidden; /* creates block formatting context */
? ? ? ? background-color: green;
}
.container .Sibling {
? ? ? ? float: left;
? ? ? ? margin: 10px;
? ? ? ? background-color: lightgreen;?
}
特別提示：
通過 overflow:hidden 創(chuàng)建 BFC，固然可以解決高度塌陷的問題，但是大范圍應(yīng)用在布局上肯定不是最合適的，畢竟 overflow:hidden 會造成溢出隱藏的問題，尤其是與 JS 的交互效果會有影響。
我們可以使用?clearfloat?實現(xiàn)清除浮動，這里就不多介紹了，想要了解的可以閱讀清除浮動。
2.導(dǎo)致外邊距折疊
相鄰的兩個盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的垂直邊距相遇時， 它們將形成一個外邊距。這個外邊距的高度等于兩個發(fā)生折疊的外邊距的高度中的較大者。
HTML
<div class="Container">
? ? <p>Sibling 1</p>
? ? <p>Sibling 2</p>
</div>
CSS
.Container {
? ? background-color: red;
? ? overflow: hidden; /* creates a block formatting context */
}
p {
? ? background-color: lightgreen;
? ? margin: 10px 0;
}
如上圖所示：紅色盒子（Container）中包含兩個綠色的兄弟元素（P），并且紅色盒子設(shè)置 overflow: hidden; 則一個BFC 已經(jīng)被創(chuàng)建,即導(dǎo)致外邊距折疊。
理論上兩個兄弟元素之間的邊距應(yīng)該是兩個元素的邊距之和（20px），但實際是 10px。這就是外邊距折疊導(dǎo)致的。
2.1 折疊外邊距的值
兩個相鄰的外邊距都是?正數(shù)?時，折疊外邊距是兩者中較大的值。
兩個相鄰的外邊距都是?負(fù)數(shù)?時，折疊外邊距是兩者中絕對值較大的值。
兩個相鄰的外邊距是?一正一負(fù)?時，折疊外邊距是兩者相加的和。
2.2?外邊距折疊的條件是 margin 必須相鄰!
3.避免外邊距折疊
這一聽起來可能有些困惑，因為我們在前面討論了 BFC 導(dǎo)致外邊距折疊的問題。但我們必須記住的是外邊距折疊（Margin collapsing）只會發(fā)生在屬于同一BFC的塊級元素之間。如果它們屬于不同的 BFC，它們之間的外邊距則不會折疊。所以通過創(chuàng)建一個不同的 BFC?，就可以避免外邊距折疊。
修改前面的例子并添加第三個兄弟元素，CSS不變。
HTML
<div class="Container">
? ? ? ? <p>Sibling 1</p>
? ? ? ? <p>Sibling 2</p>
? ? ? ? <p>Sibling 3</p>
</div>
結(jié)果不會改變，還會折疊外邊距，三個兄弟元素（P）將會以垂直距離為 10px 的距離分開。原因是三個兄弟元素都屬于同一個 BFC。
創(chuàng)建一個不同的 BFC ，就可以避免外邊距折疊。
HTML
<div class="Container">
? ? ? ? <p>Sibling 1</p>
? ? ? ? <p>Sibling 2</p>
? ? ? ? <div class="newBFC">
? ? ? ? ? ? <p>Sibling 3</p>
? ? ? ? </div>
</div>
CSS
.Container {
? ? ? ? ? ? background-color: red;
? ? ? ? ? ? overflow: hidden; /* creates a block formatting context */
}
p {
? ? ? ? ? ? background-color: lightgreen;
? ? ? ? ? ? margin: 10px 0;
}
.newBFC {
? ? ? ? ? ? overflow: hidden; /* creates new block formatting context */
}
當(dāng)?shù)诙偷谌齻€兄弟元素屬于不同的 BFC 時，它們之間就沒有外邊距折疊。
