css- BFC&IFC

文章目錄

• • • BFC:塊級格式上下文
    • • • 1. 形成BFC的條件
        • 2. BFC特性（規則）
        • 3. BFC的作用
    • IFC:内聯（行級）格式上下文
    • • • 1. 形成IFC的條件
        • 2. IFC特性（規則）

先說說FC，FC的含義就是Fomatting Context。它是CSS2.1規範中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素将如何定位，以及和其他元素的關系和互相作用。BFC和IFC都是常見的FC。分别叫做Block Fomatting Context 和Inline Formatting Context。

BFC:塊級格式上下文

1. 形成BFC的條件

1.) 浮動元素（float除none以外的值）

2.) 定位元素（position(absolute/fixed))

3.) display（值為inline-block/table-cell/table-caption時）

4.) overflow（值為hidden/auto/scroll時）

2. BFC特性（規則）

1.) 内部的盒子會在垂直方向上一個接一個的放置

2.) 垂直方向上的距離會疊加，值由最大margin值決定（如果不要疊加，就需要将該盒子變成一個獨立的盒子）

3.) BFC的區域不會與float元素區域重疊

4.) 計算BFC的高度時，浮動元素也參與計算

5.) BFC就是頁面上的一個獨立的容器，容器裡面的子元素不會影響到外面的元素

3. BFC的作用

1.) 解決margin重疊的問題（添加獨立BFC）

2.) 解決浮動高度塌陷的問題（在父級添加overflow:hidden）

3.) 解決侵占浮動元素的問題（添加overflow:hidden清除浮動）

IFC:内聯（行級）格式上下文

1. 形成IFC的條件

1.) font-size

2.) line-height

3.) height

2. IFC特性（規則）

1.) IFC的元素會在一行中從左至右排列

2.) 在一行上的所有元素會在該區域形成一個行框

3.) 行寬的高度為包含框的高度，高度為行框中最高元素的高度

4.) 浮動的元素不會在行框中，并且浮動元素會壓縮行框的寬度

5.) 行框的寬度容納不下子元素時，子元素會換下一行顯示，并且會産生新行框

6.) 行框的元素内遵循text-align和vertical-align

容器的高度：height = vertical-align+line-height