BFC是什麼

FC

格式上下文，它定義框內部的元素渲染規則，比較抽象，好比

FC像是一個大箱子，裏面裝有不少元素

箱子能夠隔開裏面的元素和外面的元素（因此外部並不會影響FC內部的渲染）

內部的規則能夠是：如何定位，寬高計算，margin摺疊等等

不一樣類型的框參與的FC類型不一樣，好比塊級框對應BFC，行內框對應IFC

注意，並非說全部的框都會產生FC，而是符合特定條件纔會產生，只有產生了對應的FC後纔會應用對應渲染規則

BFC規則

在塊格式化上下文中

每個元素左外邊與包含塊的左邊相接觸（對於從右到左的格式化，右外邊接觸右邊）

即便存在浮動也是如此（因此浮動元素正常會直接貼近它的包含塊的左邊，與普通元素重合）

除非這個元素也建立了一個新的BFC

BFC特色

1. 內部box在垂直方向，一個接一個的放置
2. box的垂直方向由margin決定，屬於同一個BFC的兩個box間的margin會重疊
3. BFC區域不會與float box重疊（可用於排版)
4. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此
5. 計算BFC的高度時，浮動元素也參與計算（不會浮動坍塌）

如何觸發BFC

1. 根元素
2. float屬性不爲none
3. position爲absolute或fixed
4. display爲inline-block, flex, inline-flex，table，table-cell，table-caption
5. overflow不爲visible

這裏提下，display: table，它自己不產生BFC，可是它會產生匿名框（包含display: table-cell的框），而這個匿名框產生BFC