軟體開發的一般被稱為民工，搞前端的，有人形容為是掏糞工，說白了連民工級別高都沒有。說直接點就是個製作介面的，注意，連設計介面的都算不上，一般前端都是拿著設計稿去照這樣子開發的。

說這些無非是覺得前端前端，卻一點也不高階啊，就連逼格高的術語都找不到幾個，但少不代表沒有，比如Closure、BFC、IFC、GFC和FFC，等等，怎麼這麼多C啊，C==操？本文就簡單列舉下這幾個C到底都他媽的什麼意思，雖然這些東西都沒什麼卵用，但萬一被哪個傻缺面試官來跟你貧這些詞彙呢？有備無患。

CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。

What's FC？
一定不是KFC，FC的全稱是：Formatting Contexts，是W3C CSS2.1規範中的一個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。

BFC
BFC(Block Formatting Contexts)直譯為"塊級格式化上下文"。Block Formatting Contexts就是頁面上的一個隔離的渲染區域，容器裡面的子元素不會在佈局上影響到外面的元素，反之也是如此。如何產生BFC？
float的值不為none。 
overflow的值不為visible。 
position的值不為relative和static。
display的值為table-cell, table-caption, inline-block中的任何一個。 
那BFC一般有什麼用呢？比如常見的多欄佈局，結合塊級別元素浮動，裡面的元素則是在一個相對隔離的環境裡執行。

IFC
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
GFC(GridLayout Formatting Contexts)直譯為"網格佈局格式化上下文"，當為一個元素設定display值為grid的時候，此元素將會獲得一個獨立的渲染區域，我們可以通過在網格容器（grid container）上定義網格定義行（grid definition rows）和網格定義列（grid definition columns）屬性各在網格專案（grid item）上定義網格行（grid row）和網格列（grid columns）為每一個網格專案（grid item）定義位置和空間。 
那麼GFC有什麼用呢，和table又有什麼區別呢？首先同樣是一個二維的表格，但GridLayout會有更加豐富的屬性來控制行列，控制對齊以及更為精細的渲染語義和控制。

FFC
FFC(Flex Formatting Contexts)直譯為"自適應格式化上下文"，display值為flex或者inline-flex的元素將會生成自適應容器（flex container），可惜這個牛逼的屬性只有谷歌和火狐支援，不過在移動端也足夠了，至少safari和chrome還是OK的，畢竟這倆在移動端才是王道。
Flex Box 由伸縮容器和伸縮專案組成。通過設定元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器。設定為 flex 的容器被渲染為一個塊級元素，而設定為 inline-flex 的容器則渲染為一個行內元素。
伸縮容器中的每一個子元素都是一個伸縮專案。伸縮專案可以是任意數量的。伸縮容器外和伸縮專案內的一切元素都不受影響。簡單地說，Flexbox 定義了伸縮容器內伸縮專案該如何佈局。