css - CSS block 格式上下文如何工作？

Question

CSS Block Formatting Context怎么办工作？

CSS2.1 规范说，在块格式上下文中，框垂直布局，从顶部开始。即使有 float 元素，也会发生这种情况，除非块框建立了新的块格式上下文。众所周知，浏览器在块格式上下文中渲染块框时，会忽略 float 元素，为什么建立新的块格式上下文会起作用？

盒子(块盒子和内联盒子)在正常流程中是如何布局的？

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

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

更新:更多问题

By saying "It's this behaviour that's useful for columnar style layouts. The main use of it however is to stop floats, say in a "main content" div, actually clearing floated side columns, i.e. floats that appear earlier in the source code."

没看懂什么意思，我举个例子，也许你会明白我的意思。

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

我认为 float 框应该 float 到包含块的顶部 - 类为 content 的 div .此外，如果 float 框在标记中较早出现，那么它将显示我认为应该是的内容。

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

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

Answer 1

Block Formatting Contexts

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

我的粗体是 成立 重要的一点

这意味着您使用的元素 overflow (任何不可见的)或 float或 inline-block ..etc 负责其子元素的布局。然后是“包含”的子元素，无论是 float 还是折叠边距，它们都应该完全由其边界父元素包含。

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch)

上面一行的意思是:

因为一个盒子只能是矩形而不是不规则的形状，这意味着两个 float 之间(甚至一个旁边)的新块格式上下文将不会环绕相邻的侧 float 。内部的子框只能延伸到触及其 parent 的左(或 RTL 中的右)边缘。正是这种行为对柱状样式布局很有用。然而，它的主要用途是停止 float ，例如在“主要内容”div 中，实际上清除 float 的侧列，即在源代码中较早出现的 float 。

Float Clearance

在正常情况下， float 应该清除所有先前 float 的元素，即之前在整个源代码中 float 的元素，而不仅仅是显示的“列”
“ float 间隙规范”中的引述是:

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts

因此，假设您有一个三列布局，其中左列和右列分别向左和向右 float ，侧列现在处于新的块格式上下文中，因为它们是 float 的(记住 float 也是建立新 BFC 的属性之一)，因此您可以愉快地在其中 float 列表元素，并且它们只清除已经在侧列内的 float ，他们不再关心以前在源代码中的 float

是否使主要内容成为新的块格式上下文？

现在，中间列，您可以简单地从两侧留出边距，使其看起来整齐地坐在两侧 float 列之间，并采用剩余的宽度，如果中心列是“流动的”，这是获得所需宽度的常用方法 - 这将很好，直到您需要在内容 div 中使用 float /清除(对于使用“clearfix”黑客或包括它们的模板的人来说，这是常见的情况)

拿这个非常简单的代码:

#left-col {
  border: 1px solid #000;
  width: 180px;
  float: left;
}
#right-col {
  border: 1px solid #000;
  width: 180px;
  float: right;
  height: 200px;
}
#content {
  background: #eee;
  margin: 0 200px;
}
.floated {
  float: right;
  width: 180px;
  height: 100px;
  background: #dad;
}

<div id="left-col">left column</div>
<div id="right-col">right column</div>

<div id="content">
  <h3>Main Content</h3>
  <p>Lorem ipsum etc..</p>
  <div class="floated">this a floated box</div>
  <div class="floated">this a floated box</div>
</div>

它产生以下内容:



一般来说，这很好，特别是如果您没有背景颜色或内部(在主要内容中) float - 请注意 float 很好(尚未清除)它们可能正在做您除了 之外的其他操作。但是 他们， H3的上边距和 p的底部边距实际上并未真正包含在内容 div(浅灰色背景)中。

因此，对上述代码的相同简单边距场景添加:

.clear-r {clear: right;}

到 CSS，并将第二个 HTML float 框更改为:

<div class="floated clear-r"> this a floated cleared box</div>

#left-col {
  border: 1px solid #000;
  width: 180px;
  float: left;
}
#right-col {
  border: 1px solid #000;
  width: 180px;
  float: right;
  height: 200px;
}
#content {
  background: #eee;
  margin: 0 200px;
}
.floated {
  float: right;
  width: 180px;
  height: 100px;
  background: #dad;
}
.clear-r {
  clear: right;
}

<div id="left-col">left column</div>
<div id="right-col">right column</div>

<div id="content">
  <h3>Main Content</h3>
  <p>Lorem ipsum etc..</p>
  <div class="floated">this a floated box</div>
  <div class="floated clear-r">this a floated cleared box</div>
</div>

这次你得到这个:



第二个浮点数正在清除右侧，但正在清除右列的整个高度。右列在源代码中较早 float ，因此它按照说明清除它!不过可能不是预期的效果，还要注意 h3和 p边距仍然折叠(未包含)。

让它建立一个块格式上下文，为了 children !

最后让主要内容栏负责- 成为块格式上下文 - 对于其内容:删除 margin: 0 200px;来自主要内容 CSS 和 地址 overflow: hidden;你会得到这个:

#left-col {
  border: 1px solid #000;
  width: 180px;
  float: left;
}
#right-col {
  border: 1px solid #000;
  width: 180px;
  float: right;
  height: 200px;
}
#content {
  background: #eee;
  overflow: hidden;
}
.floated {
  float: right;
  width: 180px;
  height: 100px;
  background: #dad;
}
.clear-r {
  clear: right;
}

<div id="left-col">left column</div>
<div id="right-col">right column</div>

<div id="content">
  <h3>Main Content</h3>
  <p>Lorem ipsum etc..</p>
  <div class="floated">this a floated box</div>
  <div class="floated clear-r">this a floated cleared box</div>
</div>

这可能更像您期望发生的情况，请注意现在包含浮点数，它们会正确清除忽略右侧列以及 h3和 p边距被包含而不是折叠。

随着这些天重置的广泛使用，边距不太明显(并且 IE 仍然没有完全正确)但是中心“主要内容”刚刚发生的事情是它变成了块格式上下文，现在负责它的自己的子(后代)元素。它实际上与微软早期的 hasLayout 概念非常相似，它使用相同的属性 display: inline-block , float , 和 overflow除了可见之外的任何东西，当然表格单元格总是有布局......但是它没有错误;)

希望能帮到大家，有什么问题欢迎追问!

更新:有关更多信息:

当您说“但是当用户代理绘制框时会忽略 float 元素并在填写内容时将它们考虑在内”。

是的 float 通常会覆盖它们的容器框，这就是您对父边界的意思吗？当一个块元素被绘制并且它包含一个 float 块时，块父元素本身被绘制为 float 块下的一个矩形，它是其他子元素的“内联匿名框”或简称为“行框”，它们被缩短以腾出空间 float

拿这个代码:

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

<div id="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>

产生这个:



你会看到父元素实际上并不包含浮点数，因为它没有完全包装它..浮点数只是 float 在内容之上 - 如果您要继续向 div 添加内容，它最终会包裹在 float 下方，因为不需要 p 的(匿名)“行框”|元素来缩短自己。

我给段落元素上色，所以你可以看到它实际上也位于 float 之下，深灰色背景是段落开始的地方，白色文本是“匿名行框”开始的地方——实际上只有他们“腾出空间” "对于 float ，除非您另有说明(即您更改上下文)

再次引用上图，如果要在 p的左侧留边距元素，是的，它会阻止文本在 float 底部环绕，因为“行框”(白色文本)只会接触其容器的左边缘，并且您将带来 p 的彩色背景在右侧，清除 float ，但您不会改变 p 的行为的格式上下文。就像上面第一张图片中的中心列;)