CSS之BFC、IFC、FFC and GFC

本文轉載於:猿2048網站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會有更加豐富的屬性來控制行列，控制對齊以及更爲精細的渲染。