BFC 定義
CSS2.1的定義 Block formatting contexts
9.4.1 Block formatting contexts
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
用google 翻譯
浮動，絕對定位的元素，塊容器（如嵌入塊，表格單元格和表格標題）不是塊框，以及“溢出”而不是“可見”的塊框（除了已經傳播的值到視口）為其內容建立新的塊格式上下文。
在塊格式上下文中，框從一個包含塊的頂部開始，一個接一個地垂直排列。兩個兄弟框之間的垂直距離由“邊距”屬性決定。塊格式化上下文中相鄰塊級別框之間的垂直邊距折疊。
在塊格式化上下文中，每個框的左外邊緣都與包含塊的左邊緣接觸（用于從右到左格式化，右邊緣接觸）。即使在有浮動的情況下也是如此（雖然箱子的線框可能因為浮動而縮小），除非箱子建立了新的塊格式上下文（在這種情況下，箱子本身可能由于浮動而變窄）。
從上面的話我們可以得出幾點BFC的產生條件，特性。
BFC本身就可以理解為一個具有特性的塊級格式化上下文。除了BFC,IFC, CSS3 中還增加了 GFC 和 FFC.
BFC可以包含浮動元素這個特性，可以用來清除浮動，當然可能導致容器長度縮短。當然目前解決浮動的最好方法應該是after的方式。
IE6、7內有個hasLayout的概念，當元素的hasLayout屬性值為true的時候會達到和BFC類似的效果。
產生條件 OFDP(overflow,float,display, position)
- overflow， 除了 visible 以外的值（hidden，auto，scroll）
- floadt，浮動元素，float 除 none 以外的值
- display，為以下其中之一的值 inline-blocks，table-cells，table-captions， flex, 或者 inline-flex（display：table可以生成BFC，原因在于Table會默認生成一個匿名的table-cell，這個table-cell生成了BFC）
- position，絕對定位元素，position（absolute，fixed）
BFC特性
- 在塊格式上下文中，框從一個包含塊的頂部開始，一個接一個地垂直排列
- 塊格式化上下文中相鄰塊級別框之間的垂直邊距折疊
- 在塊格式化上下文中，每個框的左外邊緣都與包含塊的左邊緣接觸（用于從右到左格式化，右邊緣接觸）。即使在有浮動的情況下也是如此（雖然箱子的線框可能因為浮動而縮小），除非箱子建立了新的塊格式上下文（在這種情況下，箱子本身可能由于浮動而變窄）。
其他抄過來的特性 - BFC的區域不會與float box重疊。實用場景是文字環繞。結合第三條，調整文字和圖片的距離，應該設置圖片的margin更合適
- BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。解決margin折疊
- 計算BFC的高度時，浮動元素也參與計算。 這個用來解決浮動導致的高度塌陷問題。
collapsing-margins(邊距折疊)
www.w3.org里面有介紹的collapsing-margins
我這接直接借用別人的翻譯
折疊的結果：
- 兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
- 兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
- 兩個外邊距一正一負時，折疊結果是兩者的相加的和。
產生折疊的必備條件：margin必須是鄰接的!
而根據w3c規范，兩個margin是鄰接的必須滿足以下條件：
- 必須是處于常規文檔流（非float和絕對定位）的塊級盒子,并且處于同一個BFC當中。
- 沒有線盒，沒有空隙（clearance，下面會講到），沒有padding和border將他們分隔開
- 都屬于垂直方向上相鄰的外邊距，可以是下面任意一種情況
- 元素的margin-top與其第一個常規文檔流的子元素的margin-top
- 元素的margin-bottom與其下一個常規文檔流的兄弟元素的margin-top
height為auto的元素的margin-bottom與其最后一個常規文檔流的子元素的margin-bottom
高度為0并且最小高度也為0，不包含常規文檔流的子元素，并且自身沒有建立新的BFC的元素的margin-top和margin-bottom
以上的條件意味著下列的規則：
- 創建了新的BFC的元素（例如浮動元素或者'overflow'值為'visible'以外的元素）與它的子元素的外邊距不會折疊
- 浮動元素不與任何元素的外邊距產生折疊（包括其父元素和子元素）
- 絕對定位元素不與任何元素的外邊距產生折疊
- inline-block元素不與任何元素的外邊距產生折疊
- 一個常規文檔流元素的margin-bottom與它下一個常規文檔流的兄弟元素的margin-top會產生折疊，除非它們之間存在間隙（clearance）。
- 一個常規文檔流元素的margin-top 與其第一個常規文檔流的子元素的margin-top產生折疊，條件為父元素不包含 padding 和 border ，子元素不包含 clearance。
- 一個 'height' 為 'auto' 并且 'min-height' 為 '0'的常規文檔流元素的 margin-bottom 會與其最后一個常規文檔流子元素的 margin-bottom 折疊，條件為父元素不包含 padding 和 border ，子元素的 margin-bottom 不與包含 clearance 的 margin-top 折疊。
- 一個不包含border-top、border-bottom、padding-top、padding-bottom的常規文檔流元素，并且其 'height' 為 0 或 'auto'， 'min-height' 為 '0'，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 會折疊。
case研究
- BFC-文字環繞
- P標簽產生BFC,就不受外界浮動影響
- 調整圖片和文字的距離，兩種方式，p標簽的margin-left（足夠大），img的margin-right
BFC-文字環繞
- BFC-解決margin折疊
- .outer,.wrap,第一個.item的margin-top都是10，最后距離頂部距離也是10，說名什么，折疊后再折疊。
- .last產生BFC,讓自己和子元素margin不折疊。
BFC-解決margin折疊
BFC 三欄布局
BFC 區域，不會與浮動元素重疊。因此我們可以利用這一點來實現3列布局。三欄布局BFC
Margin-自身的 margin-top 和 margin-bottom折疊
Margin-自身的 margin-top 和 margin-bottom折疊
Margin-margin-top和margin-bottom折疊
Margin-margin-top和margin-bottom
Margin-margin-top折疊
Margin-margin-top折疊
Block formatting contexts
collapsing-margins
CSS 屬性flow-root
display:flow-root|Can I Use
淺析BFC及其作用
理解CSS中BFC
前端精選文摘：BFC 神奇背后的原理
CSS清浮動處理（Clear與BFC）
CSS深入理解流體特性和BFC特性下多欄自適應布局
屬性)
