css佈局的各類FC簡單介紹：BFC，IFC，GFC，FFC

什麼是FC？

Formatting Context，格式化上下文，指頁面中一個渲染區域，擁有一套渲染規則，它決定了其子元素如何定位，以及與其餘元素的相互關係和做用。

BFC

什麼是BFC

Block Formatting Context，塊級格式化上下文，一個獨立的塊級渲染區域，該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關。

BFC的約束規則

1. 內部的BOX會在垂直方向上一個接一個的放置；
2. 垂直方向上的距離由margin決定。（完整的說法是：屬於同一個BFC的倆個相鄰的BOX的margin會發生重疊，與方向無關。）
3. 每一個元素的左外邊距與包含塊的左邊界相接觸（從左到右），即便浮動元素也是如此。（這說明BFC中的子元素不會超出它的包含塊，而position爲absolute的元素能夠超出它的包含塊邊界）；
4. BFC的區域不會與float的元素區域重疊；
5. 計算BFC的高度時，浮動子元素也參與計算；
6. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然；

BFC的應用

• 防止margin發生重疊
• 防止發生因浮動致使的高度塌陷

怎麼生成 BFC

• float的值不爲none；
• overflow的值不爲visible；
• display的值爲inline-block table-cell table-caption；
• position的值爲absolute或fixed；

display：table也認爲能夠生成 BFC？實際上是在於 Table會默認生成一個匿名的 table-cell，正是這個匿名的 table-cell生成了 BFC。

IFC

什麼是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的應用

1. 水平居中：當一個塊要在環境中水平居中時，設置其爲inline-block則會在外層產生IFC，經過text-align則可使其水平居中。
2. 垂直居中：建立一個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的區別

FFC與BFC有點兒相似，但仍有如下幾點區別：

• Flexbox 不支持 ::first-line 和 ::first-letter 這兩種僞元素
• vertical-align 對 Flexbox 中的子元素 是沒有效果的
• float 和 clear 屬性對 Flexbox 中的子元素是沒有效果的，也不會使子元素脫離文檔流(可是對Flexbox 是有效果的！)
• 多欄佈局（column-*） 在 Flexbox 中也是失效的，就是說咱們不能使用多欄佈局在 Flexbox 排列其下的子元素
• Flexbox 下的子元素不會繼承父級容器的寬