學習BFC、IFC、FFC、GFC
FC（Formatting Context）格式化內容，常見的FC有BFC、IFC、FFC、GFC四種類型，BFC和IFC是W3C CSS2.1規範提出的概念，FFC和GFC是W3C CSS3規範提出的概念，其實就是定義了一套頁面渲染的規則，決定了盒子以什麽樣的方式渲染從而占據什麽樣的位置區域，本文只是簡單的學習筆記以供參考。
想要弄懂FC，首先得弄清楚盒子模型，常見的兩種盒子模型為：
IE盒子模型（怪異模式）：
width = content-width + padding-width + border-width;
height = content-height + padding-height + border-height;
W3C盒子模型（標準）：
width = content-width;
height = content-height; IE總是與眾不同，讓人精疲力盡，好在IE8開始支持CSS3的屬性box-sizing：padding-box/content-box/inherit;有了這個屬性，我們在布局時就遊刃有余了，其實這些都是基於BFC的，下面開始進入正文：
BFC(Block formatting contexts):
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow‘ other than ‘visible‘ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
總結要點如下：
-
float 的值不為 none
-
position 的值不為 static 或 relative
-
display 的值為 table-cell、table-caption、inline-block、flex 或 inline-flex
-
overflow 的值不為 visibility
特點：
-
塊盒子垂直排列，垂直方向上在外邊距上會進行塌陷，以大的外邊距為二者之間的距離
-
浮動的塊盒子左右外邊距也會發生同樣的塌陷，以大的外邊距為二者之間的距離
IFC(Ininle formatting contexts):
In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.
總結要點如下：
-
水平方向上排列
-
行盒子以不同的方式水平對齊，文字的話一般以文字的基線對齊
- 還有一種特殊的類型是在塊盒子裏包含著行盒子稱作inline-block
特點：
-
沒有寬度和高度
FFC(Flex formatting contexts):
Made up of telescopic containers and telescopic items. You can get a telescopic container by setting the display attribute of the element to flex or inline-flex. Containers set to flex are rendered as a block level element, while containers that are set to inline-flex are rendered as inline elements.
總結要點如下：
-
自適應上下文，俗稱彈性盒模型
-
display屬性值為flex或inline-flex時即可實現塊盒子和行盒子
特點：
-
可伸縮性的盒子，盒子內外都不受影響，任意實現復雜布局
GFC(Gird formatting contexts):
When set to a display element value of grid, this element will get an independent rendering area, we can in the grid container (grid container) defined on the grid definition line (grid definition rows) and grid (grid definition columns) as defined in the attributes of each grid project (grid item) on the definition the grid line (grid row) and grid column (grid columns) for each grid project (grid item) defines the location and space.
總結要點如下：
-
網絡式布局，真正的二維空間布局
-
display屬性值為gird時即可實現網絡布局，在網格容器的行列上再次進行行列布局
特點：
-
二維布局，適用於超級復雜的兩個維度布局
常用的四種布局方式，要知其然並知其所以然，CSS規範博大精深，前端路上還需不斷學習鞏固加深！
學習BFC、IFC、FFC、GFC