html - block 容器框内的行内​​和 block 级框

Question

在 9.2.1 节的 CSS 规范中说:

Except for table boxes, which are described in a later chapter, and replaced elements, 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. Consider the markup:

<div id="d">
    <div>Anonymous text</div>
    <span>Some text</span>
    <span>Another some text</span>
    <div>Another anonymous text</div>
</div>

和样式:

div#d{
    width: 300px;
    height: 300px;
    background: aqua;
}

在我的例子中，div#d 包含 block 级和行内级框。但在秒。 9.2.1.1说

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.

问:为什么我们可以在 block 级元素(例如div)中同时放入行内元素和 block 级元素，它们将分别显示为行内元素和 block 级元素，但规范中说 block 级容器框要么仅包含 block 级框或建立内联格式化上下文，因此仅包含内联级框。

我很困惑。你能打消我的疑虑吗？

Answer 1

规范接着说:

The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes

所以内联元素被包裹在 block 级的“匿名 block ”(由浏览器中的 CSS 引擎生成，并且对您的 DOM 检查器不可见)，因此容器的所有子元素都是 block 级的，而不是混合使用 block 元素和行内元素。