BFC便锨，塊級格式化上下文澜倦，一個創(chuàng)建了新的BFC的盒子是獨立布局的恬砂，盒子里面的子元素的樣式不會影響到外面的元素。在同一個 BFC 中的兩個毗鄰的塊級盒在垂直方向（和布局方向有關(guān)系）的 margin 會發(fā)生折疊嫩絮。
W3C CSS 2.1 規(guī)范中的一個概念丛肢，它決定了元素如何對其內(nèi)容進(jìn)行布局，以及與其他元素的關(guān)系和相互作用剿干。
一蜂怎、BFC 的概念
1.規(guī)范解釋
塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分置尔，是布局過程中生成塊級盒子的區(qū)域杠步，也是浮動元素與其他元素的交互限定區(qū)域。
2.通俗理解
BFC 是一個獨立的布局環(huán)境,可以理解為一個容器,在這個容器中按照一定規(guī)則進(jìn)行物品擺放,并且不會影響其它環(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 時，它們之間就沒有外邊距折疊幸逆。
