BFC / IFC

BFC（Block Formatting Context）块级格式化上下文

定义：一个块格式化上下文 ( BFC ) 是Web页面的可视化CSS渲染出的一部分。

---

1、一个BFC由以下之一创建：

①根元素或其它包含它的元素

②浮动元素 (元素的 float 不是 none)

③绝对定位元素 (元素具有 position 为 absolute 或 fixed)

④内联块 (元素具有 display: inline-block)

⑤表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)

⑥表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)

⑦具有overflow 且值不是 visible 的块元素，

⑧display: flow-root（新加属性，只触发BFC，不像别的方法有副作用）

⑨column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

---

2、BFC两个功能

①用BFC把浮动元素包起来   http://js.jirengu.com/rozaxufetu/1/edit?html,css,output 

②把BFC元素和浮动元素划清界限    http://js.jirengu.com/felikenuve/1/edit?html,css,output

---

3、注意事项

①同一个BFC中的相邻块级盒之间的竖直margin会合并。

②一个BFC包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。(例如：爷爷里面有爸爸，爸爸里面有儿子，爷爷和爸爸都是BFC，则儿子不属于爷爷管，只属于爸爸管)

---

---

IFC（Inline Formatting Context）内联格式化上下文

在页面中，font-size规定的不是字体的高度或宽度，而是这个字体的模板高(宽)度。

字体在模板上

---

line-height是指定一个内联元素的真实占据的大小（字体样式统一）；一旦字体样式不同，字体基线发生改变，会导致内联元素的父类高度发生改变。

样式统一 样式不同

---

vertical-aline（尽量不用）

vertical-aline：top，为字体实际占据大小的顶部对齐； vertical-aline：middle，为字体模板中部对齐，不是字体居中对齐。（vertical-aline最好不用）

注：vertical-aline:top后，Ax底部红线和黑线之间存在一条看不见的缝隙

---

---

图片img为inline-block元素，一张图在div中底部有缝隙时，绝对不能用 font- size:0 解决，会引发更多的bug。 用 vertical-aline:middle 或者把 img 改为 block 元素

（因为内联元素默认基线对齐，图片和字体基线对齐后，字体的实际占据面积是字体的模板大小，所以会出现图片底下的缝隙）

底部有缝隙

注：inline-block元素不对齐 或 两个元素之间有空隙，也可用 flex 或 fload