CSS之BFC、IFC、FFC and GFC

• CSS之BFC、IFC、FFC and GFC
• 什麼是FC？ 
• BFC(Block Formatting Contexts)
• BFC的佈局規則: 
• 如何生成BFC： 
• IFC(Inline Formatting Contexts) 
• FFC(Flex Formatting Contexts) 
• GFC(GridLayout Formatting Contexts) 

什麼是FC？

• FC的全稱是：Formatting Contexts，是W3C CSS2.1規範中的一個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。

BFC(Block Formatting Contexts)

• 意為“塊級格式化上下文”。就是頁面上的一個渲染區域，容器內的子元素不會對外面的元素佈局產生影響，反之亦然。

BFC的佈局規則:

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

如何生成BFC：

1. 根元素或其它包含它的元素
2. float的值不為none
3. overflow的值不為visible
4. position的值不為relative和static
5. display的值為table-cell,table-caption和inline-block中的任何一個

• 一個塊格式化上下文包括創建它的元素內部所有內容，除了被包含於創建新的塊級格式化上下文的後代元素內的元素。
• 塊格式化上下文對於定位與清除浮動很重要。定位和清除浮動的樣式規則只適用於處於同一塊格式化上下文內的元素。浮動不會影響其它塊格式化上下文中元素的佈局，並且清除浮動只能清除同一塊格式化上下文中在它前面的元素的浮動。

IFC(Inline Formatting Contexts)

• 意為“內聯格式化上下文”,IFC中，盒子依次水平放置，從包含塊的頂部開始

FFC(Flex Formatting Contexts)

• 意為“自適應格式化上下文”,display值為flex或者inline-flex的元素將會生成自適應容器。flex box由伸縮容器和伸縮子元素組成。通過設置元素display:flex/inline-flex可以得到伸縮容器，前者為塊級元素，後者為行內元素。伸縮容器外元素不受影響。

GFC(GridLayout Formatting Contexts)

• 意為“網格佈局格式化上下文”當一個元素設置為display:grid的時候，此元素將獲得一個獨立的渲染區域，可以在網格容器上定義網格行和列，為每一個網格定義位置和空間。GFC和table的區別在於GridLayout會有更加豐富的屬性來控制行列，控制對齊以及更為精細的渲染。