块容器和视觉格式化模型

Question

在 W3C 对视觉格式模型的解释中，Section 9.2.1 指出：

a block-level box is also a block container box. A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes.

它给出了这个例子：

<DIV>
  Some text
  <P>More text
</DIV>

并指出：

if a block container box (such as that generated for the DIV above) has a block-level box inside it (such as the P above), then we force it to have only block-level boxes inside it.

它解释说，它通过将 "Some text" 包装在一个匿名块级框中来实现这一点。

但是如果我们在框中添加一个内联元素：

<DIV>
    Some text
    <P>More text
    <span>An inline element</span>
</DIV>

结果——JsFiddle——似乎与块容器盒子"contains only block-level boxes or...only inline-level boxes":

的原始说法相矛盾

似乎添加跨度会创建一个块级框，其中包含两个个块级框（一个匿名，一个显式）和一个行内级框。

添加 <span> 是否建立了内联格式化上下文？如果这是真的，那不是与内联格式化上下文仅包含内联级框的声明相矛盾吗？

我是不是遗漏了什么，还是 W3C 逻辑自相矛盾？

编辑：

所以看起来规范本身无法关闭示例中的 <p> 元素。我已经修改了我的代码：

<DIV>
    Some text
    <P>More text</p>
    <span>An inline element</span>
</DIV>

这是新的 jsFiddle。在我看来，跨度仍然像一个内联级框（即，它不占用容器的整个宽度。

Answer 1

您的示例已损坏。 span 元素是段落的子元素。

让我们用这个代替示例：

<DIV>
    Some text
    <P>More text</p>
    <span>An inline element</span>
    <span>An inline element</span>  
</DIV>

这里 div 生成一个主要的块级框。

该框包含一个包含自由文本的匿名块级框、一个由段落生成的原则块级框，以及另一个包含两个跨度元素的匿名块级框。

每个 span 元素在最后一个匿名块级框（建立内联格式化上下文）中生成一个内联级框。

块容器和视觉格式化模型

Block containers and the Visual Formatting Model

html

css

w3c