FC：formatting context 格式化上下文。
css2.1定義了 BFC 塊級格式化上下文 + IFC 行內(nèi)格式化上下文。
css3新定義了 GFC網(wǎng)格布局格式化上下文 + FFC 自適應格式化上下文。
其實就是對于塊級盒模型、行內(nèi)盒模型的一些渲染規(guī)則的定義，決定了元素如何排列、相互影響等。
BFC規(guī)定：浮動元素與生成BFC的元素不互相覆蓋，所以可以用來進行多列布局，如：左右兩列分別左右浮動，中間的內(nèi)容區(qū)自適應。
子元素浮動，父元素設(shè)置overflow：hidden的原理是：通過設(shè)置overflow：hidden，觸發(fā)父元素生成BFC塊（渲染規(guī)則規(guī)定：BFC塊之間外邊距不互相重疊），在計算高度時包含浮動子元素。
GFC：是針對那些display:grid的元素的渲染規(guī)則。
網(wǎng)格布局并沒有flex布局應用的廣泛，flex相對常用一些，但是用grid實現(xiàn)多行布局，更加好理解。
.parent { display: grid;grid-columns: 100px 200px 1fr;grid-rows:50px 200px 1fr;}//定義網(wǎng)格的行數(shù)、列數(shù)
.cell {grid-column:2;grid-row: 1;}//定義單元格的位置
//或者通過單元格命名的方式，此處不詳述
FFC：是針對display:flex的元素的渲染規(guī)則（流式布局，自適應伸縮）。
.parent{display:flex;flex-direction:row || column;align-items:flex-start || flex-end || center || strech || baseline;justify-content: flex-start || flex-end || center || space-around || space-between;align-self: auto};//定義布局方向、對齊方式等
.cell {flex:1;}//定義自身占比
