咨询inline box定义与示例：详解inline formatting context相关疑问

一、Inline Box 示例 #

以下元素或样式会生成 inline box：

• 原生行内元素：<span>、<a>、<em>、<strong>等，比如：

<p>这是一段包含<span>inline box</span>的文本，还有<a>链接元素</a>也属于inline box。</p>

• 设置display: inline的块级元素：

<div style="display: inline;">这个div被设置为inline，生成inline box</div>

二、非Inline Box 示例 #

以下情况不会生成 inline box：

• 块级元素：<div>、<p>、<h1>等，默认生成block box：

<div>这是一个块级元素，生成block box，会独占一行</div>

• 行内块元素：设置display: inline-block的元素，生成inline-block box，它兼具块级和行内特性，但不属于纯inline box：

<div style="display: inline-block;">行内块元素，有自己的宽高，不会独占一行但不是inline box</div>

• 弹性容器：设置display: flex的元素，生成flex container box，完全脱离常规流的排版：

<div style="display: flex;">弹性容器，内部元素按flex规则布局</div>

三、‘its containing inline formatting context’ 详细解释 #

首先明确：**Inline Formatting Context（IFC，行内格式化上下文）**是CSS中专门用于排版行内元素、文本的布局环境。当一个块级元素（比如<p>、<div>）内部只包含行内元素和文本时，它会自动创建一个IFC。

而‘its containing inline formatting context’指的就是当前inline box所在的那个IFC环境，这个环境是inline box的布局规则来源，所有排版行为都受这个IFC约束：

1. 布局方向：IFC内的所有inline box会沿水平方向依次排列，总宽度超过容器时自动换行；
2. 垂直对齐：inline box的垂直位置由vertical-align属性控制，默认与基线对齐；
3. 高度计算：IFC的高度由内部最高的inline box的高度（包括行高、上下内边距等）决定；
4. 上下文归属：inline box本身不会创建新的IFC，哪怕是嵌套的行内元素（比如<span>里的<em>），它们的containing IFC都是外层块级元素创建的那个环境。

举个具体例子：

<p style="width: 200px; border: 1px solid #ccc;">
  这是一段文本，包含<span style="font-size: 24px;">大字号inline box</span>和<em>斜体inline box</em>
</p>

这里<p>创建了一个IFC，<span>和<em>生成的inline box都属于这个IFC。<span>的大字号会拉高整个IFC的高度，所有inline box都会在这个IFC的规则下水平排列、垂直对齐。

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