?What's FC？
一定是不是 KFC脊凰，F(xiàn)C 的全稱是：Formatting Contexts抖棘，是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域狸涌，有一套渲染規(guī)則切省，決定了子元素將如何定位，以及和其他元素的關(guān)系和相互作用帕胆。
BFC
BFC(Block Formatting Contexts)直譯為"塊級(jí)格式化上下文"朝捆。Block Formatting Contexts就是頁(yè)面上的一個(gè)隔離的渲染區(qū)域，容器里面的子元素不會(huì)在布局上影響到外面的元素懒豹，反之也是如此芙盘。如何產(chǎn)生 BFC驯用？
float 的值不為 none。
overflow 的值不為 visible儒老。
position 的值不為 relative 和 static蝴乔。
display 的值為 table-cell, table-caption, inline-block 中的任何一個(gè)。
那 BFC 一般有什么用呢驮樊？比如常見的多欄布局薇正，結(jié)合塊級(jí)別元素浮動(dòng)，里面的元素則是在一個(gè)相對(duì)隔離的環(huán)境里運(yùn)行囚衔。
IFC
IFC(Inline Formatting Contexts)直譯為"內(nèi)聯(lián)格式化上下文"挖腰，IFC 的 line box（線框）高度由其包含行內(nèi)元素中最高的實(shí)際高度計(jì)算而來(lái)（不受到豎直方向的 padding/margin 影響)
IFC 中的 line box 一般左右都貼緊整個(gè) IFC，但是會(huì)因?yàn)?float 元素而擾亂佳魔。float 元素會(huì)位于 IFC 與與 line box 之間曙聂，使得 line box 寬度縮短晦炊。 同個(gè) ifc 下的多個(gè) line box 高度會(huì)不同鞠鲜。 IFC 中時(shí)不可能有塊級(jí)元素的，當(dāng)插入塊級(jí)元素時(shí)（如 p 中插入 div）會(huì)產(chǎn)生兩個(gè)匿名塊與 div 分隔開断国，即產(chǎn)生兩個(gè) IFC贤姆，每個(gè) IFC 對(duì)外表現(xiàn)為塊級(jí)元素，與 div 垂直排列稳衬。
那么 IFC 一般有什么用呢霞捡？
水平居中：當(dāng)一個(gè)塊要在環(huán)境中水平居中時(shí)，設(shè)置其為inline-block則會(huì)在外層產(chǎn)生 IFC薄疚，通過(guò) text-align 則可以使其水平居中碧信。
垂直居中：創(chuàng)建一個(gè) IFC，用其中一個(gè)元素?fù)伍_父元素的高度街夭，然后設(shè)置其 vertical-align:middle砰碴，其他行內(nèi)元素則可以在此父元素下垂直居中。
GFC
GFC(GridLayout Formatting Contexts)直譯為"網(wǎng)格布局格式化上下文"板丽，當(dāng)為一個(gè)元素設(shè)置 display 值為 grid 的時(shí)候呈枉，此元素將會(huì)獲得一個(gè)獨(dú)立的渲染區(qū)域，我們可以通過(guò)在網(wǎng)格容器（grid container）上定義網(wǎng)格定義行（grid definition rows）和網(wǎng)格定義列（grid definition columns）屬性各在網(wǎng)格項(xiàng)目（grid item）上定義網(wǎng)格行（grid row）和網(wǎng)格列（grid columns）為每一個(gè)網(wǎng)格項(xiàng)目（grid item）定義位置和空間埃碱。
那么 GFC 有什么用呢猖辫，和table又有什么區(qū)別呢？首先同樣是一個(gè)二維的表格砚殿，但GridLayout 會(huì)有更加豐富的屬性來(lái)控制行列啃憎，控制對(duì)齊以及更為精細(xì)的渲染語(yǔ)義和控制。
FFC
FFC(Flex Formatting Contexts)直譯為"自適應(yīng)格式化上下文"似炎，display 值為 flex 或者inline-flex 的元素將會(huì)生成自適應(yīng)容器（flex container）荧飞，可惜這個(gè)牛逼的屬性只有谷歌和火狐支持凡人，不過(guò)在移動(dòng)端也足夠了，至少 safari 和 chrome 還是OK的叹阔，畢竟這倆在移動(dòng)端才是王道挠轴。
Flex Box 由伸縮容器和伸縮項(xiàng)目組成。通過(guò)設(shè)置元素的 display 屬性為 flex 或 inline-flex 可以得到一個(gè)伸縮容器耳幢。設(shè)置為 flex 的容器被渲染為一個(gè)塊級(jí)元素岸晦，而設(shè)置為 inline-flex 的容器則渲染為一個(gè)行內(nèi)元素。
伸縮容器中的每一個(gè)子元素都是一個(gè)伸縮項(xiàng)目睛藻。伸縮項(xiàng)目可以是任意數(shù)量的启上。伸縮容器外和伸縮項(xiàng)目?jī)?nèi)的一切元素都不受影響。簡(jiǎn)單地說(shuō)店印，F(xiàn)lexbox 定義了伸縮容器內(nèi)伸縮項(xiàng)目該如何布局冈在。
