是什么

是行内的格式化上下文，行内框（inline box） 一个接一个的排列组成了它，排列顺序根据 writing-mode（书写模式）来决定：

  • 水平书写模式，各个框从左到右水平的排列

  • 垂直书写模式，各个框从顶部到底部开始水平的排列

:::note

行内框指 文本,<span></span> 和其它所有被指定成行内样式的元素，例如：

  • display: inline-block

  • display: inline-flex

:::

各个框组成了一行，该行位于一个称为 行框（line box）的矩形区域之之中

可以理解成，每一行的内容都是一个行框

行框是一个概念，并不会实际显示

创建方式

块级元素中仅包含内联元素时，这些内联元素就组成了一个 IFC

当 IFC 中插入了块级元素时，原本的 IFC 会被拆分成多个 IFC，例如

1
2
3
4
5
<div class="horizontal">
  NoraH1to's blog
  <div>突然插入</div>
  horizontal
</div>

将会分割出两个 IFC

规则

书写模式

很好理解，水平的时候就水平方向上排列，垂直的时候就在垂直方向上排列

下面例子中，两个 div 元素中的所有的单词分别组合起来，成为其行内格式化上下文

writing-mode 属性还会影响块级元素的排列顺序，具体查阅[MDN 文档][writing-mode]

边距边框

border, padding, margin 只会在行的方向上占据空间（水平排列时只在水平上占位，以此类推）

border 会显示但不会占据空间

换行时的样式

一个 行内框 因为行框空间不足被分配到多行中时，margin, border, padding 均不会在断裂处生效

下面例子中可以看到 span 的断裂处，边框也断裂了

块方向上的对齐

行内框可以使用 vertical-align 属性来指定其在块的方向上的对齐方式

该属性中的 vertical 其实名不副实，书写方式为垂直时其效果为在水平上对齐

行内方向上对齐

可以使用 text-align 属性来指定在行内方向上的对齐方式，前提是还有剩余空间

浮动元素的影响

浮动元素会影响 行框 的宽(高)度

参考

IFC | MDN