Question

在CSS Display Module Level 3 specs上有一个关于block container的注释，内容为：

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

从概念上讲这怎么可能？

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

Answer 1

这是完全可能的，对于某些CSS规则甚至是必要的。理解这一点的最简单方法是使用此类框的示例。

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

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

比较这两个例子：

.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;
}

<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>

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

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

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

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

1 个答案: