块容器盒内的内联和块级盒

Question

在 sec 9.2.1 的 CSS 规范中说：

除了表格框（在后面的章节中介绍）和 替换元素，块级盒子也是块容器盒子。一种 块容器盒子要么只包含块级盒子，要么 建立一个内联格式化上下文，因此只包含 内联级框。 考虑标记：

<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 包含块级和内联级框。但在秒。 9.2.1.1 说

如果是块容器框（例如为上面的 DIV 生成的） 里面有一个块级的盒子（比如上面的P），那么我们强制 它内部只有块级框。

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

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

Answer 1

规范接着说：

break 之前和之后的 line box 都包含在匿名 block box 中，block-level box 成为这些匿名 box 的兄弟

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