1.FC是指什么?
Formatting context 是頁面中的一塊獨立渲染區(qū)域论寨，并且有一套渲染規(guī)則室抽，它決定了其子元素的定位辩棒、相互關(guān)系及作用贞绳。
CSS2中最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。
CSS3中多了( Flex Formatting Contexts )( FFC )和網(wǎng)格布局格式化上下文( GridLayout Formatting Contexts )( GFC )
因此：FFC包括BFC操骡、IFC九火、FFC、GFC
2. BFC中的幾個問題
2.1 BFC產(chǎn)生條件及布局規(guī)則
產(chǎn)生條件：
（1）根元素
（2）display 為inline-block
（3）position 為absolute或者fixed
（4）float 不為none
（5）overflow不為visible
布局規(guī)則：
(1) 內(nèi)部的Box會在垂直方向册招，一個接一個地放置岔激。正常文檔流
(2) Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊是掰。margin重疊原理
(3) 每個元素的margin box的左邊虑鼎， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)冀惭。即使存在浮動也是如此震叙。浮動元素覆蓋正常文檔流原理
(4) BFC的區(qū)域不會與float box重疊掀鹅。可用于兩欄布局
(5) BFC就是頁面上的一個隔離的獨立容器散休，容器里面的子元素不會影響到外面的元素。反之也如此乐尊。
(6) 計算BFC的高度時戚丸，浮動元素也參與計算。用于清除浮動
2.2 為什么浮動元素不能撐開父元素扔嵌？
<html>
<body>
<div>
<div style="float:left; height:50px"><div>
</div>
</body>
</html>
根元素觸發(fā)BFC, 根元素的子元素處于BFC中限府，但父級div并沒有觸發(fā)BFC，因此浮動元素撐開了html痢缎，但并沒有撐開父級div胁勺。
3. IFC總結(jié)
line box的寬度由浮動情況和它的包含塊決定。
line box的高度由line-height的計算結(jié)果決定独旷。
行高
= 文本高度+ 上間距+ 下間距（上下間距是相等的）
=兩行文字基線之間的距離
=兩行文字頂線之間的距離
=兩行文字中線之間的距離署穗。
4. 參考
[1] 淺談格式化上下文
[2] BFC神奇背后的原理
[3] IFC
[4] line-height
