塊格式化上下文 （Block formatting contexts）

1、BFC 是什麼？

9.3 Positioning schemes

CSS 2.1 中，一個盒可能會根據三種定位方案來佈局：

常規流 CSS 2.1 中，常規流包括塊級盒的塊格式化（block formatting），行內級盒的行內格式化和塊級與行內級盒的相對定位。

浮動 在浮動模型中，盒先根據常規流來放置，而後從常規流中取出來並儘量遠地向左或向右移動。其它內容可能沿着浮動（盒）的一側排列（Content may flow along the side of a float）。

絕對定位 在絕對定位模型中，一個盒會從常規流中所有移除（它不會影響後面的兄弟元素）並根據包含塊肯定位置。

9.4 Normal flow

常規流中的盒屬於一個格式化上下文，多是塊或是行內（格式化上下文），但不能二者都是。塊級盒參與塊格式化上下文。行內級盒參與行內格式化上下文。

根據 CSS 中的定義，能夠知道 BFC 是一種塊級元素的佈局規則。

2、如何產生 BFC ？

9.4.1 Block formatting contexts

浮動，絕對定位的元素，非塊盒的塊容器（例如 inline-blocks，table-cells 和table-captions ），以及 overflow 不爲 visible 的塊盒（當該值已被傳播到視口時除外）會爲其內容創建新的塊格式化上下文。

在一個塊格式化上下文中，盒在垂直方向一個接一個地放置，從包含塊的頂部開始。兩個兄弟盒之間的垂直距離由 margin 屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的垂直外邊距會合並。

在一個塊格式化上下文中，每一個盒的左外邊界（left outer edge）挨着包含塊的左外邊界（對於從右向左的格式化，右外邊界挨着）。即便存在浮動（儘管一個盒的行框可能會由於浮動而收縮），這也成立。除非該盒創建了一個新的塊格式化上下文（這種狀況下，該盒自身可能會由於浮動變窄）。

根據 CSS 中關於 BFC 的規範，如下狀況會觸發 BFC：

• 浮動的元素，即 float: left; float: right;
• 絕對定位的元素，即 position: absolute; position: fixed;
• 非塊盒的塊容器，即 display: inline-block; display: table-cell; display: table-caption; display: flex; 等
• overflow 不爲 visible 的塊盒，即 overflow: hidden; overflow: scroll; overflow: auto; 等

3、BFC 的應用

BFC 的應用就是根據 BFC 的規則來解決佈局中遇到的問題。

在一個塊格式化上下文中，盒在垂直方向一個接一個地放置，從包含塊的頂部開始。
兩個兄弟盒之間的垂直距離由 margin 屬性決定。
同一個塊格式化上下文中的相鄰塊級盒之間的垂直外邊距會合並。

container 是一個 BFC ，one 的 margin-bottom 和 two 的 margin-top 重疊，要解決這個問題，只須要給 one 和 two 包裝一層容器，讓他們不屬於同一個 BFC 就好了。

修改前：

修改後：

在一個塊格式化上下文中，每一個盒的左外邊界（left outer edge）挨着包含塊的左外邊界（對於從右向左的格式化，右外邊界挨着）。即便存在浮動（儘管一個盒的行框可能會由於浮動而收縮），這也成立。除非該盒創建了一個新的塊格式化上下文（這種狀況下，該盒自身可能會由於浮動變窄）。

經常使用的清除浮動就是應用的這個原理

修改前：

修改後：