**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 定義了伸縮容器內伸縮項目該如何布局。 ## 摘自 [第 73 題： 介紹下 BFC、IFC、GFC 和 FFC](https://muyiy.cn/question/css/73.html)