【CSS】浅谈css中格式化上下文BFC、IFC（二）

怼烎@ 2022-06-05 10:59 232阅读 0赞

## Inline Formatting Context ##

Inline Formatting Context的缩写就是IFC。中文名叫，行内格式化上下文。行内框参与IFC。

1.  什么是行框？
    
    在IFC中，每个框都是一个接一个地水平排列，起点是[包含块][Link 1]的顶部，水平方向上的margin、border、和padding在框之间得到保留。框在垂直方向上以不同的方式对齐，通过vertical设置。框的每一行称为行框。  
    行框的宽度由它的包含块和其中的浮动元素决定，高度由line-height决定。

2.行内框

如果几个行内框（宽度超出行框）在水平方向无法放入到一个行框中，那么它们将可能被分割成多个行框，来包含这些行内框，每一行就是一个行框。另外也有可能由于双向文本的处理而将一个行框分割成多个行框。
    如果一个行框不能被分割（比如行内框只包含单个字符，或被设置成不允许换行等），那么行内框将会溢出。
    在分割处不会运用margin、padding、border等属性。

来看一段代码：

![这里写图片描述][SouthEast]

如上图所示，分割处的行框没有应用边框样式。另外，因为！！！！是在一起的，是默认不换行的（英文字母同），所以内容被溢出了。

当行内框的高度小于包含它的行框时，行内框可以通过vertical-align来设置行内框在行框中垂直方向的对齐方式。默认为基线对齐。  
举例：

两个span在同一个行框中，但是第一个span将行框撑大了，所以第二个span就有一部分是空白的，就可以设置vertical-align。虽然第一个也可以设置，但是没有意义。

3.行高（line-height）的计算

在IFC中，客户端会将行内框排列为垂直方向的行框的堆叠。  
行高由一下几个特点决定：

1.  计算框内每个行内框的高度
2.  行内框按照vertical-align的属性在垂直方向对齐
3.  行高是最上方框的顶边到最下面框的底边的距离

自己感觉这篇文章写的不好。如果有什么不懂的可以讨论。若有纰漏，还请不吝指出。  
挚谢阅读。

[Link 1]: http://blog.csdn.net/liu_jiachen/article/details/78625329%20%E2%80%9C%E5%8C%85%E5%90%AB%E5%9D%97%E2%80%9D
[SouthEast]: /images/20220605/64c804317dce432cbe240ef1fdca2fc6.png