块容器如何才能同时建立块和内联格式化上下文？

Question

在CSS Display Module Level 3规范中，有一条注释block container指出：

注意：块容器框可以同时建立块格式上下文和内联格式上下文。

从概念上讲这怎么可能？

那么如何布置儿童箱呢？例如，如果我们在块容器中同时具有内联级和块级框，那么在这种情况下使用哪种格式化上下文？两种格式设置上下文是同时使用还是其中一种“胜出”而另一种被搁置了？

Answer 1

这是完全可能的，对于某些 CSS 规则来说甚至是必要的。理解这一点的最简单方法是通过一个这样的盒子的例子。

<div style="overflow:auto">hello world</div>

这里我们有一个带有display:block（默认为 div 元素）和 的元素overflow:auto。这是元素的渲染框建立块格式化上下文的一种方式。例如，这会影响盒子的位置和尺寸如何受浮动体的存在影响。

比较这两个例子：

<div style="overflow:auto">hello world</div>

.formatting.contexts {
  overflow:visible;
}

.container {
  width:70px;
}

img {
  float:left;
  margin-right:3px;
}

<div class="container">
  <img src="http://placehold.it/16" alt="placeholder grey square less than one line in height">
  <div class="formatting contexts">hello world</div>
</div>

.formatting.contexts {
  overflow:auto;
}

.container {
  width:70px;
}

img {
  float:left;
  margin-right:3px;
}

在第一个示例中，文本环绕在图像下方。这是因为具有“formatting contexts”类的 div 具有overflow:visible，因此它不会形成块格式化上下文。

但是，它仅包含由文本内容形成的行内框。因此，根据 CSS 规则，它建立了一个内联格式化上下文。因此，文本内容可以在此上下文中水平布置在行框中。它是第一个缩小的行框以避免与浮动重叠。

在第二个示例中，文本没有换行在图像下方。这是因为具有“格式化上下文”类的 div 现在具有overflow:auto这意味着它建立了一个块格式化上下文，并且它是缩小的块框以避免与浮动重叠。但它的内容是一样的，只是内联框，所以它还建立了一个内联格式化上下文。