阻止容器和可视化格式模型

Question

在W3C对可视化格式模型的解释中，Section 9.2.1表示：

  

块级别框也是块容器框。块容器盒   要么只包含块级框，要么建立内联   格式化上下文，因此只包含内联级框。

它给出了这个例子：

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

并声明：

  

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

通过包装＆＃34;一些文字＆＃34;它解决了这个问题。在一个匿名的块级框中。

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

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

结果 - JsFiddle - 似乎与原始声明相矛盾，即块容器框＆＃34;仅包含块级框或......仅包含内联级框＆＃34;：

看来，添加span会创建一个块级框，其中包含两个块级别框（一个匿名，一个显式）和一个内联级别框。

是否已添加<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元素的匿名块级框。

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