8.3 CSS 内联排版上下文（Inline Formatting Context）

IFC(Inline Formatting Contexts)即内联排版上下文，也可称为内联格式化上下文。用来规定内联级盒子的格式化规则。

IFC布局规则

1. 内部的Boxes会在水平方向，一个接一个地放置。
2. 这些Boxes垂直方向的起点从包含块盒子的顶部开始。
3. 摆放这些Boxes的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。
4. 在垂直方向上，这些框可能会以不同形式来对齐（vertical-align）：它们可能会使用底部或顶部对齐，也可能通过其内部的文本基线（baseline）对齐。
5. 能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和存在的浮动来决定。
6. IFC中的line box一般左右边都贴紧其包含块，但是会因为float元素的存在发生变化。float元素会位于IFC与与line box之间，使得line box宽度缩短。
7. IFC中的line box高度由CSS行高计算规则来确定，同个IFC下的多个line box高度可能会不同（比如一行包含了较高的图片，而另一行只有文本）。
8. 当inline-level boxes的总宽度少于包含它们的line box时，其水平渲染规则由‘text-align’属性来确定，如果取值为‘justify’，那么浏览器会对inline-boxes（注意不是inline-table 和 inline-block boxes）中的文字和空格做出拉伸。
9. 当一个inline box超过line box的宽度时，它会被分割成多个boxes，这些boxes被分布在多个line box里。如果一个inline box不能被分割（比如只包含单个字符，或word-breaking机制被禁用，或该行内框受white-space属性值为nowrap或pre的影响），那么这个inline box将溢出这个line box。

上面的术语可能会看得有点迷糊，一会儿inline box，一会儿line box。line box是行框，inline box是行内框（或称为内联框），我们可简单按字面意思来理解：行内框是包含在行框内（或多个行框内，当出现换行时）的。

何时会生成IFC

和BFC可以被元素属性触发而被创建（triggered）不同，IFC只有在一个块元素中仅包含内联级别元素时才会生成。

下面我们通过一个实例来看看行内框的构造：

p 元素产生一个块框，它包含了五个行内框，其中的三个是匿名的：

1. 匿名：”Several”
2. EM: “emphasized words”
3. 匿名：”appear”
4. STRONG: “in this”
5. 匿名：”sentence, dear.”

为了格式化这个段落，用户代理将这五个框排入行框内。本例中，为 p 元素生成的框生成了行内框的包含块。如果该包含块足够宽，则所有的行内框将放在一个行框内：

 Several emphasized words appear in this sentence, dear.

否则inline box将产生分割，来放置在多个行框内。如上例中Result面板中所示，这个段落被分布在3个行框中。您可以在上例中修改p元素的width来查看不同的格式化效果。

上例中，em元素被分割成2块（我们把它们称为“split1”和“split2”），margin、padding、border和text-decoration属性将不在分割处产生视觉效果，也就是在split1之后和split2之前无效。

回过来看上面的例子中这些属性的影响：

• margin 会被插入到 "emphasized" 之前和 "words" 之后。
• padding 会被插入到 "emphasized" 的前面和上下，以及 "words" 的后面和上下。
• border 将绘制在 "emphasized" 的前面和上下，以及 "words" 的后面和上下。

IFC有什么用途

使用IFC布局规则4和8可以实现文本垂直和水平居中：

• 我们使用一个块元素来包含一个内联元素，这样会生成一个IFC来规定如何渲染行内元素。按照IFC行内框的布局规则，其水平位置将由text-align属性来确定，所以设置text-align:center将把行内框居中。
• 外部块元素的行高为内部行框设定了最小高度，好比在渲染时以一个隐藏的0宽度字符开始，具备该块元素所设置的行高（本例中为300px）和字体属性，我们称之为是一个支架（strut），作用是把外部块元素撑起来。参考阅读W3规范：Strut。
• 然后我们设置内联（或内联块）元素的垂直对齐属性为中间，它将参照前述的隐藏支架的baseline来对齐。如果我们把块元素的字体设置为0，实际效果就是内联元素被垂直居中放置在块元素中。

行高计算

用户代理（user agent）将行内级框排入垂直堆叠的行框内。行框的高度由下面步骤决定：

1. 计算行框里的各行内级框的高度。对于置换元素、行内块元素、行内表格元素来说，这是边界框的高度，对于行内框来说，这是其‘line-height’。
2. 行内级元素根据其‘vertical-align’属性垂直对齐。如果这些框使用‘top’或‘bottom’对齐，用户代理必须以最小化行框的高为目标对齐这些框。这可能存在多种对齐方案，CSS 2.1并不定义行框基线的位置（也就是前述 strut 的位置）。
3. 行框的高是最顶端框的顶边到最底端框的底边的距离。

空的行内元素产生空的行内框，但是这些框仍然拥有margins, padding, borders 和一个line height, 所以在上述行高计算中和有内容的行内元素一样。

行距（Leading）和半行距（half-leading）

CSS 假设所有字体的度量都有基线以上的height和基线以下的depth，我们使用A（ascender）来表示这个height（字母高出基线部分），而用D（descender）来表示depth（字母低出基线部分）。

同时我们定义 AD = A + D，也就是整个字母的高度。

User agent 必须在一个非替换行内框中按照字符（glyphs）的基线对它们进行对齐。也就是确定A 和 D。 某元素中的字符可能存在多个字体，A 和 D则不尽相同。如果这个行内框不包含任何字符，它被认为包含一个 strut（一个0宽度的隐藏字符），这个隐藏字符的A 和 D遵循该元素的第一个有效字体。

关于line-height，我们在 CSS 行高对其实际使用语法有过介绍。

除了前面所介绍的BFC和IFC之外，CSS3还引入了新的布局方式及其所生成的格式化上下文，包括grid layout所对应的GFC（grid formatting context）和flex layout所对应的FFC（flex formatting context），我们将放在CSS进阶课程中详细介绍。

下面我们先进入SVG基础知识的学习课程。