BFC是個啥？

BFC的定義

BFC到底是個啥呢？先貼出一段大佬們在分析BFC的時候字面上的理解：

在CSS佈局中，是通過對一個個box的佈局，來實現整體頁面的佈局，這一個個box也就是一個個容器元素，這些元素分為兩類：塊級元素(block)，行內元素(inline)。 對於不同類型的元素，有不同的處理規則，這個元素內部的子元素也會用不同方式去渲染

BFC中的FC為formatting context的首字母縮寫，翻譯過來就是“格式化上下文”，它是頁面上的一個渲染區域，並有一套渲染規則，規定了它內部元素的渲染方式 ，而BFC就表示“塊級格式化上下文”。對應的還有IFC,FFC,GFC等

我的理解就是：BFC是一種css渲染規則，規定了塊級元素的渲染規則。運用了BFC渲染規則的元素是一個獨立的渲染區域，和渲染規則，不會影響其他外部元素的佈局

使用BFC規則後當前元素和內部元素表現

1. BFC內部的Box(塊元素)會在垂直方向，一個接一個地放置
2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
3. 每個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動元素也是如此。
4. BFC的區域不會與float元素區域發生重疊
5. BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
6. 計算BFC的高度時，浮動元素也參與計算(可以解決浮動元素的父元素高度塌陷問題)

生成BFC規則的方式（抄自MDN）

1. 根元素(html)預設生成一個BFC
2. 浮動元素（元素的 float 不是 none）
3. 絕對定位元素（元素的 position 為 absolute 或 fixed）
4. 行內塊元素（元素的 display 為 inline-block）
5. 表格單元格（元素的 display為 table-cell，HTML表格單元格預設為該值）
6. 表格標題（元素的 display 為 table-caption，HTML表格標題預設為該值）
7. 匿名錶格單元格元素（元素的 display為 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的預設屬性）或 inline-table）
8. overflow 值不為 visible 的塊元素
9. display 值為 flow-root 的元素
10. contain 值為 layout、content或 paint 的元素
11. 彈性元素（display為 flex 或 inline-flex元素的直接子元素）
12. 網格元素（display為 grid 或 inline-grid 元素的直接子元素）
13. 多列容器（元素的 column-count 或 column-width 不為 auto，包括 column-count 為 1）
14. column-span 為 all 的元素始終會創建一個新的BFC，即使該元素沒有包裹在一個多列容器中（標準變更，Chrome bug）。

註：BFC包含創建它的元素內部的所有內容

BFC常用場景

一，解決浮動的父元素高度塌陷問題

I am content inside the container.

子元素設置float後，父級元素高度塌陷了。根據上面提到的BFC元素在計算高度的時候，會算上其中的浮動元素的高度，所以上面例子中這種情況，可以設置父元素為BFC來解決：

I am content inside the container.

二，解決margin重疊問題

根據BFC的獨立，不影響其他元素佈局的特性，通過設置其中一個元素為BFC來解決：