簡介

理解CSS中的BFC與IFC，使你對CSS佈局更加得心應手。

什麼是BFC

BFC(Block Formatting Context)英文直譯：塊級格式化上下文。BFC形成一個單獨的區塊，BFC裡面的元素不會影響BFC區塊之外的元素或區塊，反之，BFC區塊之外的元素不會影響BFC內的元素。

BFC的形成

以下元素會形成BFC：

float 的值不為 none
position 的值不為 static 或 relative
overflow 的值不為 visibility
display 的值為 table-cell、table-caption、inline-block、flex 或 inline-flex

BFC的特性

1.在BFC內部，塊級元素會垂直排列，兩個相鄰的塊級元素margin-bottom、margin-top會互相影響，margin值取較大的那一個。padding值不受影響。在BFC內部，相鄰兩個塊級元素的距離 “距離” = (margin-bottom、margin-top)中較大的那一個。

2.在BFC內部，塊級元素的左邊以包含塊(BFC)的左邊界為起點。

3.在BFC內部，行級元素會水平排列，兩個相鄰的行級元素margin-left、margin-right、padding-left、padding-right都不會受影響，會發揮它們應有的功效。margin-top、margin-bottom不起作用，沒有相應的效果。相鄰兩個行級元素的距離 “距離” = “padding-right” + “padding-left”。

(如果不清楚行級元素、塊級元素的，請參考：www.cnblogs.com/Bobo999/p/5…)

BFC示例

html程式碼 {% asset_img code-html.png html image%}

css程式碼 {% asset_img code-css.png css image%}

效果程式碼 {% asset_img example2.png view image%} {% asset_img example1.png view image%}

什麼是IFC

內部的元素從包含塊的頂部開始，從左至右(預設)排列成一行形成的一個矩形盒子叫做line box。

IFC的特性

1.line box的寬度由浮動情況和它的包含塊決定。 2.line box的高度由line-height的計算結果決定。 3.line box從左至右排列成一行形成一個line box如果不能一行排列，可能會生成多個垂直疊加的line box。Line boxs被疊加沒4.有垂直方向上的分離(特殊情況除外)，並且他們也不重疊。通常line box的左邊緣挨著包含塊的左邊緣，右邊緣挨著包含快的右邊緣。 5.當在一行中行內級盒子的總寬度比包含他們的line box的寬度小，他們的在line box中的水平放置位置由'text align'屬性決定。 6.當一個行內盒子超過了line box的寬度，則它被分割成幾個盒子並且這些盒子被分配成幾個橫穿過的line boxs。如果一個行內盒子不能被分割。則行內盒子溢位line box。

示例

html 程式碼 {% asset_img line-box-code.png line-box-code image%} 會產生五個line box

匿名 : 'Several'
em : 'emphasized words'
匿名 : 'appear'
strong : 'in this'
匿名 : 'sentence, dear'

效果圖 {% asset_img line-box-view.png line-box-view image%}

參考文獻

segmentfault.com/a/119000000… www.w3cplus.com/css/underst…

作者資訊：寧文飛，人和未來大資料前端工程師

學習BFC與IFC

簡介