694
淺析css中的BFC、IFC、GFC和FFC
很多前端工程師麵試時經常被要求解釋CSS中有關FC的概念問題。今天，老k就為大家淺析一下。
FC的全稱是：Formatting Contexts，是W3C CSS2.1規範中的一個概念。它是頁麵中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。
FC一共包含BFC、IFC、GFC 、FFC四種類型。CSS2.1規範中隻有BFC、IFC。CSS3推出GFC、FFC兩種新類型。
BFC
BFC(Block Formatting Contexts)直譯為"塊級格式化上下文"。Block Formatting Contexts就是頁麵上的一個隔離的渲染區域，容器裏麵的子元素不會在布局上影響到外麵的元素，反之也是如此。
BFC有一下特性：
-
內部的Box會在垂直方向，從頂部開始一個接一個地放置。
-
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生疊加
-
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
-
BFC的區域不會與float box疊加。
-
BFC就是頁麵上的一個隔離的獨立容器，容器裏麵的子元素不會影響到外麵的元素，反之亦然。
-
計算BFC的高度時，浮動元素也參與計算。
如何產生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有一下特性：
1.IFC中的line box一般左右都貼緊整個IFC，但是會因為float元素而擾亂。float元素會位於IFC與與line box之間，使得line box寬度縮短。
2. 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將改變傳統的布局模式，他將讓布局從一維布局變成了二維布局。簡單的說，有了GFC之後，布局不再局限於單個維度了。這個時候你要實現類似九宮格，拚圖之類的布局效果顯得格外的容易。
FFC
FFC(Flex Formatting Contexts)直譯為"自適應格式化上下文"，display值為flex或者inline-flex的元素將會生成自適應容器（flex container）。
Flex Box 由伸縮容器和伸縮項目組成。通過設置元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器。設置為 flex 的容器被渲染為一個塊級元素，而設置為 inline-flex 的容器則渲染為一個行內元素。
伸縮容器中的每一個子元素都是一個伸縮項目。伸縮項目可以是任意數量的。伸縮容器外和伸縮項目內的一切元素都不受影響。簡單地說，Flexbox 定義了伸縮容器內伸縮項目該如何布局。
整體來說，FFC與BFC有點兒類似，但仍有以下幾點區別：
-
Flexbox 不支持 ::first-line 和 ::first-letter 這兩種偽元素
-
vertical-align 對 Flexbox 中的子元素 是沒有效果的
-
float 和 clear 屬性對 Flexbox 中的子元素是沒有效果的，也不會使子元素脫離文檔流(但是對Flexbox 是有效果的！)
-
多欄布局（column-*） 在 Flexbox 中也是失效的，就是說我們不能使用多欄布局在Flexbox 排列其下的子元素
-
Flexbox 下的子元素不會繼承父級容器的寬
歡迎關注個人公眾號，查看更多好文。
最後更新：2017-07-18 20:36:46