什么是IFC？
IFC全称：Inline Formatting Context，名为行级格式化上下文
如何触发IFC？
- 块级元素中仅包含内联级别元素
形成条件非常简单，需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC。
IFC布局规则
- 子元素在水平方向上一个接一个排列，在垂直方向上将以容器顶部开始向下排列。
- 节点无法声明宽高，其中 margin 和 padding 在水平方向有效在垂直方向无效。
- 在垂直方向上，子元素会以不同形式来对齐（vertical-align）
- 能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。
- IFC中的
line box一般左右边贴紧其包含块，但float元素会优先排列。 - IFC中的
line box高度由line-height计算规则来间接确定，同个IFC下的多个line box高度可能会不同。 - 当
inline boxes的总宽度少于包含它们的line box时，其水平渲染规则由text-align属性值来决定。 - 当一个
inline box超过父元素的宽度时，它会被分割成多个boxes，这些boxes分布在多个line box中。如果子元素未设置强制换行的情况下，inline box将不可被分割，将会溢出父元素。
IFC 应用场景
- 水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过 text-align 则可以使其水平居中。
- 垂直居中：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align: middle，其他行内元素则可以在此父元素下垂直居中。
