BFC、IFC、GFC 和 FFC 的差別？

在描述他們之間的差別之前，我們首先要了解一下什麼是 BFC、IFC、GFC、FFC？

我們知道元素有内聯元素、塊級元素、行内塊級元素，在頁面上渲染時它們的定位，排列方式等都有所不同，就是因為它們根據内部的格式化上下文進行不同的渲染，即 BFC 和 IFC。

後面 css3 新增了 grid 布局以及 flex 布局，是以也迎來了 GFC、FFC。

BFC（Block formatting contexts）：塊級格式上下文​

頁面上的一個隔離的渲染區域，那麼他是如何産生的呢？可以觸發 BFC 的元素有 float、position、overflow、display：table-cell/ inline-block/table-caption ；BFC 有什麼作用呢？比如說實作多欄布局

IFC（Inline formatting contexts）：内聯格式上下文​

IFC 的 line box（線框）高度由其包含行内元素中最高的實際高度計算而來（不受到豎直方向的 padding/margin 影響)IFC 中的 line box 一般左右都貼緊整個 IFC，但是會因為 float 元素而擾亂。

float 元素會位于 IFC 與與 line box 之間，使得 line box 寬度縮短。同個 ifc 下的多個 line box 高度會不同

IFC 中時不可能有塊級元素的，當插入塊級元素時（如 p 中插入 div）會産生兩個匿名塊與 div 分隔開，即産生兩個 IFC，每個 IFC 對外表現為塊級元素，與 div 垂直排列。

那麼 IFC 一般有什麼用呢？

水準居中：當一個塊要在環境中水準居中時，設定其為 inline-block 則會在外層産生 IFC，通過 text-align 則可以使其水準居中。

垂直居中：建立一個 IFC，用其中一個元素撐開父元素的高度，然後設定其 vertical-align:middle，其他行内元素則可以在此父元素下垂直居中。

GFC（GrideLayout formatting contexts）：網格布局格式化上下文

當為一個元素設定 display 值為 grid 的時候，此元素将會獲得一個獨立的渲染區域，我們可以通過在網格容器（grid container）上定義網格定義行（grid definition rows）和網格定義列（grid definition columns）屬性各在網格項目（grid item）上定義網格行（grid row）和網格列（grid columns）為每一個網格項目（grid item）定義位置和空間。

那麼 GFC 有什麼用呢，和 table 又有什麼差別呢？首先同樣是一個二維的表格，但 GridLayout 會有更加豐富的屬性來控制行列，控制對齊以及更為精細的渲染語義和控制。

FFC（Flex formatting contexts）:自适應格式上下文

display 值為 flex 或者 inline-flex 的元素将會生成自适應容器（flex container），可惜這個牛逼的屬性隻有谷歌和火狐支援，不過在移動端也足夠了，至少 safari 和 chrome 還是 OK 的，畢竟這倆在移動端才是王道。Flex Box 由伸縮容器和伸縮項目組成。

通過設定元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器。設定為 flex 的容器被渲染為一個塊級元素，而設定為 inline-flex 的容器則渲染為一個行内元素。

伸縮容器中的每一個子元素都是一個伸縮項目。伸縮項目可以是任意數量的。伸縮容器外和伸縮項目内的一切元素都不受影響。簡單地說，Flexbox 定義了伸縮容器内伸縮項目該如何布局。

感謝閱讀。

學習更多技能

請點選下方公衆号

​