接着聊一下BFC、IFC，與FFC、GFC，GFC是一種二維度的布局方式，現在也蠻火，但是因為兼容性問題比較大，現在用的不多。其實這些布局方式經常會遇到，主要是想了解一下相關的各種概念和術語。
想要理解BFC與IFC，首先要理解另外兩個概念：Box 和 FC（即 formatting context）
1、Box
一個頁面是由很多個 Box 組成的，元素的類型和 display 屬性決定了這個 Box 的類型。不同類型的 Box，會參與不同的 Formatting Context。
Block level的box會參與形成BFC，比如display值為block，list-item，table的元素。
Inline level的box會參與形成IFC，比如display值為inline，inline-table，inline-block的元素。
2、FC（Formatting Context）
它是W3C CSS2.1規范中的一個概念，定義的是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。
常見的Formatting Context 有：Block Formatting Context（BFC | 塊級格式化上下文） 和 Inline Formatting Context（IFC |行內格式化上下文）。
下面就來介紹IFC和BFC的布局規則。
3、IFC布局規則：
在行內格式化上下文中，框(boxes)一個接一個地水平排列，起點是包含塊的頂部。水平方向上的
margin，border和padding在框之間得到保留。框在垂直方向上可以以不同的方式對齊：它們的頂部或底部對齊，或根據其中文字的基線對齊。包含那些框的長方形區域，會形成一行，叫做行框。
4、BFC布局規則：
內部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由
margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊每個元素的左外邊緣（
margin-left)， 與包含塊的左邊（contain box left）相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。除非這個元素自己形成了一個新的BFC。BFC的區域不會與
float box重疊。BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算
參考：
W3C文檔inline-formatting
W3C文檔block-formatting
5、怎樣形成一個BFC？
塊級格式化上下文由以下之一創建：
根元素或其它包含它的元素
浮動 (元素的
float不是none)絕對定位的元素 (元素具有
position為absolute或fixed)非塊級元素具有
display: inline-block，table-cell, table-caption, flex, inline-flex塊級元素具有
overflow，且值不是visible
整理到這兒，對於上面第4條產生了一個疑問：為什么display: inline-block;的元素是inline level 的元素，參與形成IFC，卻能創建BFC？后來覺得答案是這樣的：inline-block的元素的內部是一個BFC，但是它本身可以和其它inline元素一起形成IFC。
6、BFC用處
防止margin發生重疊
防止發生因浮動導致的高度塌陷
自適應布局等
7、GFC(GridLayout Formatting Contexts)
直譯為"網格布局格式化上下文"（也即是新的布局：display:grid;兼容性問題比較大），當為一個元素設置display值為grid的時候，此元素將會獲得一個獨立的渲染區域，我們可以通過在網格容器（grid container）上定義網格定義行（grid definition rows）和網格定義列（grid definition columns）屬性各在網格項目（grid item）上定義網格行（grid row）和網格列（grid columns）為每一個網格項目（grid item）定義位置和空間。
GFC將改變傳統的布局模式，他將讓布局從一維布局變成了二維布局。簡單的說，有了GFC之后，布局不再局限於單個維度了。這個時候你要實現類似九宮格，拼圖之類的布局效果顯得格外的容易。
8、FFC(Flex Formatting Contexts)
直譯為"自適應格式化上下文"（也即是現在的flex布局：display:flex;），display值為flex或者inline-flex的元素將會生成自適應容器（flex container）。
Flex Box 由伸縮容器和伸縮項目組成。通過設置元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器。設置為 flex 的容器被渲染為一個塊級元素，而設置為 inline-flex 的容器則渲染為一個行內元素。
伸縮容器中的每一個子元素都是一個伸縮項目。伸縮項目可以是任意數量的。伸縮容器外和伸縮項目內的一切元素都不受影響。簡單地說，Flexbox 定義了伸縮容器內伸縮項目該如何布局。
9、FFC與BFC的區別
FFC與BFC有點兒類似，但仍有以下幾點區別：
- Flexbox 不支持
::first-line和::first-letter這兩種偽元素 vertical-align對Flexbox中的子元素 是沒有效果的float和clear屬性對Flexbox中的子元素是沒有效果的，也不會使子元素脫離文檔流(但是對Flexbox是有效果的！)- 多欄布局（
column-*） 在Flexbox中也是失效的，就是說我們不能使用多欄布局在Flexbox排列其下的子元素 Flexbox下的子元素不會繼承父級容器的寬