Inline Formatting Contexts: 内联格式化上下文

[Adamwu1992]

不同于块级格式化上下文，内联格式化上下文无法通过显式地给定某个属性值从而构造出来。

如果在一个父元素（容器）内部，子元素（盒子）从容器的顶部开始，一个接一个水平排列。这些盒子的margin、border和padding值都生效，那么我们可以说这些盒子处于内联格式化上下文中。这些盒子的垂直对其方式可能有多种（以它们的顶部或者底部对齐，或者以它们的baseline对齐）。包含着这些盒子形成一行的矩形区域被称作行盒。

所谓盒子(boxes)，就是给HTML元素一个形象的名字，因为所有的元素在文档流中都像盒子一样排列着。 而行盒(line boxes)指的并不是一个具体的元素，而是包含着一些盒子形成一行的矩形区域，这些被包含的盒子被称作内联盒（inline boxes）。

行盒的宽度取决于它的包含块（containing block）或者浮动。通常来说，行盒的左边框通常和它容器的左边框相接，右边框和容器的右边框相接，所以在同一个内联格式化上下文中行盒的宽度是相同的。当存在浮动盒子的时候是例外，浮动盒子会插在行盒边框和容器边框之间，从而占用一部分容器的宽度，行盒的宽度就会相应的收缩。

包含块，containing block，通常来说指的是包含着它后代盒子的块。我们通常说一个盒子为它的后代建立了包含块。而”一个盒子的包含块“指的是这个盒子所处的包含块，而不是它生成的包含块。在CSS2.1中，许多盒子的位置和尺寸的计算都遵循着它们的包含块。

行盒的高度取决于计算行高的规则。行盒总是能包含它所有的子盒子的，但是行盒的高度有可能比它最高的子盒子的高度更高（当包含的盒子是基于baseline对齐的时候）。如果一个子盒子的高度小于行盒的高度，该子盒子的垂直对其方式取决于它的vertical-align属性。同一个内联格式化上下文中行盒的高度通常都不一样（因为它们可能有些包含了图片，有些仅仅只有文字）。

当多个盒子无法排列进一个行盒时，他们会被分配到多个堆叠（也就是垂直排列）的行盒。因此，一个段落就是由一系列的行盒堆叠而成的。堆叠的行盒之间没有间隔（除非另有指明），也不会重叠。

当一个行盒内所有盒子的宽度和小于行盒的宽度时，它们的水平分布方式取决于行盒的text-align属性。如果属性值是justify，用户代理可能会拉伸内联盒内的空白或者文本（在inline-table和inline-block中不会）。

如果一个内联盒超过行盒的宽度，它将被分割成多个盒子并且分配到不同的行盒中。如果这个内联盒无法分割（比如，只包含单个字符、或者指定word breaking规则不允许截断，或者属性值white-space为nowrap或者pre），这个内联盒将超出行盒。

当内联盒被分割时，定义的边距、边框和填充效果在分割处不会体现。

内联盒还有可能因为bidirectional text processing被拆分到多个盒子内。

行盒是为了在IFC中盛放内联级内容被创建出来的。那些不包括文本、不包括非零边距、边框或者填充的内联元素、不包括其他流式内容（比如图片，内联块(inline-block)或者内联表格(inline-table)），并且不是以保留的换行符结尾的行盒，出于确定内部元素位置的目的时，它必须被当做一个没有高度的行盒。其他时候它必须被当做不存在。

下面是一个构造内联盒子的例子。这个段落是由块级元素p创建的，它包含着散布着em和strong的匿名文本。

  <p>
    Several <em>emphasized words</em> appear <strong>in this</strong> sentence, dear.
  </p>

这个p创建了一个包含5个内联盒子的块级盒子，其中三个是匿名的：

• 匿名: Several
• em: emphasized words
• 匿名: appear
• strong: in this
• 匿名: sentence, dear.

为了格式化这个段落，用户代理将这5个盒子排列到行盒中。在这个例子中，p生成的盒子为行盒建立了包含块（containing block）,如果包含块足够宽，所有的内连盒子将会分布在同一个行盒中，如果不够宽，将会被分割进多个行盒中。

如果em: emphasized words这个内联盒子被分配到两个行盒里，应用在em标签上的margin、padding和border样式在emphasized之后和words之前将不会起作用。

参考

W3C: inline-formatting