CSS float规范中“line”术语含义及相关疑问咨询

1. 规范里的“line”是不是“line box”？ #

规范里提到：

A float is a box that is shifted to the left or right on the current line.

这里的“line”可以直接理解为line box（行框），更准确地说，它指的是当前inline格式化上下文（IFC）中正在生成的那一行对应的行框。

line box是IFC环境里，由inline级元素（比如文本、<span>、<img>）组成的矩形框，每一行内容都会生成一个独立的line box。当浮动元素被放在“当前行”时，它会从正常流中移出，紧贴父容器的左/右侧，而对应的line box会自动调整自身宽度，避开浮动元素的区域，保证inline内容不会和浮动元素重叠。

2. 浮动会不会创建Inline Formatting Context？ #

不会。浮动元素触发的是Block Formatting Context（BFC，块级格式化上下文），而非IFC。

相关概念说明：

• IFC一般由包含inline级内容的块级容器自动生成，或者通过display: inline-block、inline-table这类属性的元素触发，主要用于排版inline内容。
• 浮动元素之所以能让文本围绕排列，是因为父容器的IFC会调整line box的布局避开它，不是因为浮动自己创建了IFC。
• 浮动触发BFC的作用是：避免和其他块级元素重叠，同时解决父容器包含浮动子元素时的高度塌陷问题。

可视化示例辅助理解 #

看一段简单代码：

<p>
  <img style="float: left;" alt="示例图片">
  这是一段会围绕浮动图片排列的文本，第一行的line box会避开图片左侧区域，从右侧开始显示；后续每行的line box都会持续避开图片，直到文本高度超过图片，才会恢复全宽排列。
</p>

在这个例子里：

• <p>作为块级容器，自动生成了IFC来处理内部的inline内容；
• 浮动的<img>被放置在第一个line box的左侧，后续所有line box都会调整宽度避开图片，直到文本内容越过图片的底部位置。

内容的提问来源于stack exchange，提问作者Totopo