Question

CSS2.1规范说，在块格式化上下文中，框从顶部开始垂直排列。即使路径中存在浮动元素，也会发生这种情况，除非块框建立了新的块格式化上下文。众所周知，当浏览器在块格式化上下文中渲染块框时，浮动元素被省略，为什么建立新的块格式化上下文有效呢？

盒子（块盒和内联盒）如何在正常流程中布局？

我在某处读到块元素生成块框，但是当用户代理绘制框并在填写内容时将其考虑在内时，将忽略浮动元素。虽然浮动元素将与框的其他元素边界重叠，但解决方案是使用overflow:hidden为重叠元素建立新的块格式化上下文。

“新的块格式化上下文仍然是块格式化”，因此在绘制框时，它还会将浮动元素视为不退出。这是对的还是我误解了“新的块格式化上下文？”

更新：更多问题

通过说“这是对柱状样式布局有用的行为。然而，它的主要用途是停止浮动，例如在”主要内容“div中，实际上清除浮动的侧列，即在源中出现的浮动代码“。

我不明白其含义，我会提供一个例子，也许你会理解我。

.content {
  background: #eee;
  color #000;
  border: 3px solid #444;
  width: 500px;
  height: 200px;
}
.float {
  background: rgba(0, 0, 255, 0.5);
  border: 1px solid #00f;
  width: 150px;
  height: 150px;
  float: right;
}
p {
  background: #444;
  color: #fff;
}

<div class="content">
  <h3>This is a content box</h3>
  <p>It contains a left floated box, you can see the actual content div does go under the float, but that it is the &lt;h3&gt; and &lt;p&gt; <b>line boxes</b> that are shortened to make room for the float. This is normal behaviour.</p>
  <div class="float">floated box</div>
</div>

我认为浮动框应该浮动到包含块的顶部 - 具有类content的div。此外，如果浮动框出现在标记的前面，那么它将显示我认为它应该是什么。

.content {
  background: #eee;
  color #000;
  border: 3px solid #444;
  width: 500px;
  height: 200px;
}
.float {
  background: rgba(0, 0, 255, 0.5);
  border: 1px solid #00f;
  width: 150px;
  height: 150px;
  float: right;
}
p {
  background: #444;
  color: #fff;
}

<div class="content">
  <div class="float">floated box</div>
  <h3>This is a content box</h3>
  <p>it contains a left floated box, you can see the actual content div does go under the float, but that it is the &lt;h3&gt; and &lt;p&gt; <b>line boxes</b> that are shortened to make room for the float, this is normal behaviour</p>
</div>

我们如何解释这个？我们可以使用“块格式化上下文和内联格式化上下文”来解释它吗？

CSS块格式化上下文如何工作？

更新：更多问题

1 个答案: