内联格式化上下文
本文解释了内联格式化上下文。
核心概念
内联格式化上下文是网页视觉呈现的一部分。内联框一个接一个地排列，按照正在使用的书写模式中句子运行的方向排列。
- 在水平书写模式中，框从左侧开始水平排列。
- 在垂直书写模式中，它们将从顶部开始垂直排列。
在下面的示例中，具有黑色边框的两个 <div> 元素是 块格式化上下文 的一部分，而在每个框内，单词参与内联格式化上下文。水平书写模式中的单词水平运行，而垂直书写模式中的单词垂直运行。
形成一行的框包含在一个称为行框的矩形区域中。此框将足够大以容纳该行中的所有内联框；当内联方向上没有更多空间时，将创建另一行。因此，段落是一组内联行框，在块方向上堆叠。
当内联框被拆分时，外边距、边框和内边距在拆分处没有视觉效果。在下一个示例中，有一个 <span> 元素包裹着一组单词，这些单词包裹在两行上。<span> 上的边框在包裹点处断开。
内联方向上的外边距、边框和内边距将被尊重。在下面的示例中，您可以看到内联 <span> 元素上的外边距、边框和内边距是如何添加的。
注意：我使用的是逻辑、流相关的属性——padding-inline-start 而不是 padding-left——以便它们在文本是水平还是垂直时都可以在内联维度上工作。有关这些属性的更多信息，请阅读 逻辑属性和值。
块方向对齐
可以使用 vertical-align 属性以不同的方式在块方向上对齐内联框，该属性将在垂直书写模式中对齐块轴线（因此根本不是垂直对齐！）。在下面的示例中，大型文本使第一句话的行框更大，因此可以使用 vertical-align 属性对齐两侧的内联框。我使用了 top 值，尝试将其更改为 middle、bottom 或 baseline。
内联方向对齐
如果内联方向上有额外空间，可以使用 text-align 属性在其行框内对齐内联框。尝试将下面的 text-align 的值更改为 end。
浮动影响
行框通常在内联方向上具有相同的大小，因此如果在水平书写模式下工作，则具有相同的宽度，如果在垂直书写模式下工作，则具有相同的高度。但是，如果在同一个块格式化上下文中有一个 float，则浮动将导致包裹浮动的行框变得更短。