时间戳

首页 > 解决方案 > 块容器如何同时建立块和内联格式化上下文？

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

问题描述

从CSS Display Module Level 3 规范有一个注释block container说：

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

这在概念上怎么可能？

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

标签： cssw3c

解决方案

对于某些 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 规则，它建立了一个内联格式化上下文。因此，文本内容可以在此上下文中水平排列在行框中。它是第一个被缩小以避免与浮动重叠的行框。

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

推荐阅读