CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC筏餐。
FC的全稱是：Formatting Contexts，是W3C CSS2.1規(guī)范中的一個概念牡拇。它是頁面中的一塊渲染區(qū)域魁瞪，并且有一套渲染規(guī)則穆律，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用导俘。
1峦耘、BFC*
BFC(Block Formatting Contexts)直譯為"塊級格式化上下文"。Block Formatting Contexts就是頁面上的一個隔離的渲染區(qū)域旅薄，容器里面的子元素不會在布局上影響到外面的元素辅髓，反之也是如此。如何產(chǎn)生BFC少梁？
float的值不為none洛口。?
overflow的值不為visible。?
position的值不為relative和static凯沪。
display的值為table-cell, table-caption, inline-block中的任何一個第焰。?
那BFC一般有什么用呢？比如常見的多欄布局妨马，結合塊級別元素浮動挺举，里面的元素則是在一個相對隔離的環(huán)境里運行。
2身笤、IFC
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)境中水平居中時，設置其為inline-block則會在外層產(chǎn)生IFC取视，通過text-align則可以使其水平居中硝皂。
垂直居中：創(chuàng)建一個IFC，用其中一個元素撐開父元素的高度作谭，然后設置其vertical-align:middle稽物，其他行內(nèi)元素則可以在此父元素下垂直居中。
3折欠、GFC（css3）
GFC(GridLayout Formatting Contexts)直譯為"網(wǎng)格布局格式化上下文"贝或，當為一個元素設置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會有更加豐富的屬性來控制行列售淡，控制對齊以及更為精細的渲染語義和控制。
4慷垮、FFC（css3）
FFC(Flex Formatting Contexts)直譯為"自適應格式化上下文"揖闸，display值為flex或者inline-flex的元素將會生成自適應容器（flex container），可惜這個牛逼的屬性只有谷歌和火狐支持料身，不過在移動端也足夠了汤纸，至少safari和chrome還是OK的，畢竟這倆在移動端才是王道芹血。
Flex Box 由伸縮容器和伸縮項目組成贮泞。通過設置元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器。設置為 flex 的容器被渲染為一個塊級元素幔烛，而設置為 inline-flex 的容器則渲染為一個行內(nèi)元素啃擦。
伸縮容器中的每一個子元素都是一個伸縮項目。伸縮項目可以是任意數(shù)量的饿悬。伸縮容器外和伸縮項目內(nèi)的一切元素都不受影響令蛉。簡單地說，F(xiàn)lexbox 定義了伸縮容器內(nèi)伸縮項目該如何布局狡恬。
