文章参考自：https://segmentfault.com/a/1190000017273573
一、何为IFC
IFC（Inline Formatting Contexts）内联格式化上下文
二、IFC形成条件
1、块级元素中仅包含内联级别元素
三、IFC的特性
1.子元素水平方向横向排列，并且垂直方向起点为元素顶部。
2.子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。
3.在垂直方向上，子元素会以不同形式来对齐（vertical-align）
4.能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。
5.IFC中的“line box”一般左右边贴紧其包含块，但float元素会优先排列。
6.IFC中的“line box”高度由 CSS 行高计算规则来确定，同个IFC下的多个line box高度可能会不同。
7.当 inline-level boxes的总宽度少于包含它们的line box时，其水平渲染规则由 text-align 属性值来决定。
8.当一个“inline box”超过父元素的宽度时，它会被分割成多个boxes，这些 oxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素。
四、例子
相比较于BFC，IFC的规则噼里啪啦一大堆，很少有人会耐心看下去，举几个例子，花几分钟就可以大概明白其特性。
（1）上下间距不生效
css
.warp {
border: 1px solid red;
display: inline-block;
}
.text {
margin: 20px;
background: green;
}
html
<div class="warp">
<span class="text">文本一</span>
<span class="text">文本二</span>
</div>
左右margin撑开，上下margin并未撑开，符合IFC规范，只计算横向样式控件，不计算纵向样式空间。
（2）多个元素水平居中
css
.warp {
border: 1px solid red;
width: 200px;
text-align: center;
}
.text {
background: green;
}
html
<div class="warp">
<span class="text">文本一</span>
<span class="text">文本二</span>
</div>
水平排列规则根据IFC容器的text-align值来排列，可以用来实现多个子元素的水平居中。
（3）float元素优先排列
css
.warp {
border: 1px solid red; width: 200px;
}
.text {
background: green;
}
.f-l {
float: left;
}
html
<div class="warp">
<span class="text">这是文本1</span>
<span class="text">这是文本2</span>
<span class="text f-l">这是文本3</span>
<span class="text">这是文本4</span>
</div>
IFC中具备float属性值的元素优先排列，在很多场景中用来在文章段落开头添加“tag”可以用到。
