css IFC

文章参考自：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

    文本一
    文本二

image.png

左右margin撑开，上下margin并未撑开，符合IFC规范，只计算横向样式控件，不计算纵向样式空间。

（2）多个元素水平居中
css

.warp { 
  border: 1px solid red; 
  width: 200px; 
  text-align: center; 
}
.text { 
  background: green; 
}

html

    文本一
    文本二

image.png

水平排列规则根据IFC容器的text-align值来排列，可以用来实现多个子元素的水平居中。

（3）float元素优先排列
css

.warp { 
  border: 1px solid red; width: 200px; 
}
.text { 
  background: green; 
}
.f-l { 
  float: left;
}

html

    这是文本1
    这是文本2
    这是文本3
    这是文本4

image.png

IFC中具备float属性值的元素优先排列，在很多场景中用来在文章段落开头添加“tag”可以用到。