* 概念：它是指一塊獨立的區域，只有塊級元素參與。規定了內部元素如何布局，并且與外部元素不相干。
* BFC布局規則：
1. 內部box會在垂直方向一個接一個的放置
2. box垂直方向的間隔由margin決定，屬于同一個BFC的兩個相鄰box的margin會發生重疊
3. 計算BFC高度時，浮動元素也參與計算
4. BFC是一個獨立區域，容器中的元素和外部元素互不影響
5. BFC區域不會與float box重疊
6. 每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)，即使存在浮動也是如此。
* BFC產生條件：
1. 根元素
2. float值不為none
3. overflow值不為visible
4. display值為inline-block、table、table-cell、table-caption
5. position值為absolute、fixed
* BFC應用
1. 清除浮動：通常子元素設置浮動之后，父元素高度會坍塌。解決辦法：將父元素設置為BFC容器，設置父元素overflow:hidden;
2. 解決垂直方向上margin合并：將其中一個元素嵌套在另一個容器中，并且將這個容器設置為BFC，這樣兩個元素就在不同的BFC中，margin則不會發生重疊。
3. 自適應兩列布局：兩列布局中，左側元素設置浮動之后，右側元素會和左側元素發生重疊。根據BFC布局規則第五條，我們可設置右側元素生成BFC（overflow:hidden;），來實現自適應兩列布局
