### IFC（Inline Formatting Context） IFC即行内框产生的格式上下文 **IFC规则** ``` 在行内格式化上下文中 框一个接一个地水平排列，起点是包含块的顶部。 水平方向上的 margin，border 和 padding 在框之间得到保留 框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐 ``` **行框** **包含那些框的长方形区域，会形成一行，叫做行框** 行框的宽度由它的包含块和其中的浮动元素决定，高度的确定由行高度计算规则决定 行框的规则： ``` 如果几个行内框在水平方向无法放入一个行框内，它们可以分配在两个或多个垂直堆叠的行框中（即行内框的分割） 行框在堆叠时没有垂直方向上的分割且永不重叠 行框的高度总是足够容纳所包含的所有框。不过，它可能高于它包含的最高的框（例如，框对齐会引起基线对齐） 行框的左边接触到其包含块的左边，右边接触到其包含块的右边。 ``` **结合补充下IFC规则：** ``` 浮动元素可能会处于包含块边缘和行框边缘之间 尽管在相同的行内格式化上下文中的行框通常拥有相同的宽度（包含块的宽度），它们可能会因浮动元素缩短了可用宽度，而在宽度上发生变化 同一行内格式化上下文中的行框通常高度不一样（如，一行包含了一个高的图形，而其它行只包含文本） 当一行中行内框宽度的总和小于包含它们的行框的宽，它们在水平方向上的对齐，取决于 `text-align` 特性 空的行内框应该被忽略 即不包含文本，保留空白符，margin/padding/border非0的行内元素， 以及其他常规流中的内容(比如，图片，inline blocks 和 inline tables)， 并且不是以换行结束的行框， 必须被当作零高度行框对待 ``` 总结： - 行内元素总是会应用IFC渲染规则 - 行内元素会应用IFC规则渲染，譬如`text-align`可以用来居中等 - 块框内部，对于文本这类的匿名元素，会产生匿名行框包围，而行框内部就应用IFC渲染规则 - 行内框内部，对于那些行内元素，一样应用IFC渲染规则 - 另外，`inline-block`，会在元素外层产生IFC（所以这个元素是可以通过`text-align`水平居中的），当然，它内部则按照BFC规则渲染 相比BFC规则来说，IFC可能更加抽象（因为没有那么条理清晰的规则和触发条件） 但总的来说，它就是行内元素自身如何显示以及在框内如何摆放的渲染规则，这样描述应该更容易理解