在描述他們之間的區(qū)別之前，我們首先要了解一下什么是 BFC、IFC、GFC、FFC？

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

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

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

頁面上的一個隔離的渲染區(qū)域，那么他是如何產(chǎn)生的呢？可以觸發(fā) BFC 的元素有 float、position、overflow、display：table-cell/ inline-block/table-caption ；BFC 有什么作用呢？比如說實現(xiàn)多欄布局

IFC（Inline formatting contexts）：內(nèi)聯(lián)格式上下文

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

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

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

那么 IFC 一般有什么用呢？

水平居中：當一個塊要在環(huán)境中水平居中時，設(shè)置其為 inline-block 則會在外層產(chǎn)生 IFC，通過 text-align 則可以使其水平居中。

垂直居中：創(chuàng)建一個 IFC，用其中一個元素撐開父元素的高度，然后設(shè)置其 vertical-align:middle，其他行內(nèi)元素則可以在此父元素下垂直居中。

GFC（GrideLayout formatting contexts）：網(wǎng)格布局格式化上下文

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

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

FFC（Flex formatting contexts）:自適應(yīng)格式上下文

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

通過設(shè)置元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器。設(shè)置為 flex 的容器被渲染為一個塊級元素，而設(shè)置為 inline-flex 的容器則渲染為一個行內(nèi)元素。

伸縮容器中的每一個子元素都是一個伸縮項目。伸縮項目可以是任意數(shù)量的。伸縮容器外和伸縮項目內(nèi)的一切元素都不受影響。簡單地說，F(xiàn)lexbox 定義了伸縮容器內(nèi)伸縮項目該如何布局。

感謝閱讀。

国产秋霞理论久久久电影-婷婷色九月综合激情丁香-欧美在线观看乱妇视频-精品国avA久久久久久久-国产乱码精品一区二区三区亚洲人-欧美熟妇一区二区三区蜜桃视频

BFC、IFC、GFC 和 FFC 的區(qū)別？

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

IFC（Inline formatting contexts）：內(nèi)聯(lián)格式上下文

GFC（GrideLayout formatting contexts）：網(wǎng)格布局格式化上下文

FFC（Flex formatting contexts）:自適應(yīng)格式上下文

學習更多技能
請點擊下方公眾號

国产秋霞理论久久久电影-婷婷色九月综合激情丁香-欧美在线观看乱妇视频-精品国avA久久久久久久-国产乱码精品一区二区三区亚洲人-欧美熟妇一区二区三区蜜桃视频

BFC、IFC、GFC 和 FFC 的區(qū)別？

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

IFC（Inline formatting contexts）：內(nèi)聯(lián)格式上下文

GFC（GrideLayout formatting contexts）：網(wǎng)格布局格式化上下文

FFC（Flex formatting contexts）:自適應(yīng)格式上下文

學習更多技能請點擊下方公眾號

BFC、IFC、GFC 和 FFC 的區(qū)別？

學習更多技能
請點擊下方公眾號