關於BFC的簡單理解

BFC介紹

BFC官方定義：塊格式化上下文，它是Web頁面的視覺化CSS渲染的一部分。具體功能類似與一種官方定義的特殊的css屬性，這種屬性是不可更改的。

BFC規則

BFC的一系列作用，比如常用的清除浮動，取消margin合併等等這些作用得以實現，是因為BFC的一些規則。它的規則如下：

【1】內部的Box會在垂直方向，一個接一個地放置。
【2】Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
【3】每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格化，否則相反)。即使存在浮動也是如此。
【4】BFC的區域不會與float box重疊。
【5】BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
【6】計算BFC的高度時，浮動元素也參與計算

BFC生成方式

該元素是根元素或包含根元素
float的值不為none
overflow的值不為visible
display的值為inline-block、table-cell、table-caption
position的值為absolute或fixed

規則運用：清除浮動

上圖中定義了父級塊(box)和2個子級塊(box1、box2)，我們知道float會使塊級脫離文件流。這樣，父級塊(box)的高度就不包含(box1、box2)，如果我們想要父級塊的具體高度(包含box1和box2)，那麼我們可以參考BFC的規則【6】，即將父級元素處於BFC區域下，也就是在父級元素處生成BFC即可（參考生成方式）。我們新增overflow:hidden，結果如下：

規則運用：清除margin合併

上圖box1和box2處在同一BFC區域中(html根元素),所以由規則【1】【2】我們可以理解兩個塊之間的距離為50px，而不是（50+50）。

通過給其中一個盒子新增父級塊(box)，通過設定父級塊生成新的BFC區域，由於box1和box2處在不同的BFC區域，所以距離變為了（50+50）。綜上情況，我所理解的BFC就是一個區域，元素處於這個區域中，就必須遵守這個區域的規則。相應的由於這些規則，塊就具有了一些特殊的作用。