什么格式上下文适用于不创建自己的元素？

Question

当我阅读 CSS Visual 格式规范时，我看到

正常流程中的框属于格式化上下文，在 CSS 2.2 中可以是表格、块或内联。块级框参与块格式设置上下文。内联级框参与内联格式设置上下文。

但并非所有框都会创建块格式上下文。它在文档中的哪个位置描述了未创建 BFC 的框的正常流程，如果他们没有创建 BFC，则适用什么格式上下文？

.container {
background-color: red;
/*overflow: hidden; !* creates a block formatting context *!*/
}
p {
background-color: lightgreen;
margin: 10px 0;
}

<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
</div>

例如，在此代码中，如果我取消注释overflow: hidden;div 会得到一个 BFC，但它以前是什么？

Answer 1

简而言之，每个块都位于格式上下文中。没有特殊属性的块(例如，没有附加额外 CSS 的div)都位于其父级的格式上下文中。

只有当一个块具有position、float、opacity等属性时，才会为块及其内容创建新的格式上下文。

为了回答你的问题，当一个块没有创建自己的BFC时，它叫什么，这就是W3C页面所说的"正常流"。

Answer 2

文档中的哪个位置描述了未创建 BFC 的框的正常流程

我会在您所指的同一文档中说，因为不创建 BFC 的元素是一个必须属于另一个 BFC(或 IFC)的框，如果它是一个流入元素。

如果他们不创建一个，什么格式上下文适用？

简单没有人。元素不一定创建格式上下文。

---

为了更容易理解，让我们考虑一下 MDN 的定义：

块格式上下文是网页的可视 CSS 呈现的一部分。它是块框布局发生的区域，浮点数与其他元素相互作用的区域。

然后我们可以阅读

设置overflow: auto创建了一个包含浮点数的新 BFC。我们的<div>现在变成了布局中的迷你布局。任何子元素都将包含在其中。

换句话说，BFC 是一种隔离布局的一部分以避免与外部世界进行任何交互的方法。一些已知的相互作用是浮动和边距崩溃。

让我们举一个简单的例子：

.wrapper {
outline: 1px solid;
overflow: hidden;
}
.wrapper>div {
margin: 10px;
background: red;
}

<div class="wrapper">
<div>
<p>some text here</p>
<p>some text here</p>
</div>
<div>
</div>
</div>
<div class="wrapper">
<div>
</div>
</div>

在下面的示例中，我们的包装器创建了一个 BFC，其中的所有元素都属于它，包括p标签，即使它们不是它的直接子级。您会注意到包装器及其子元素没有边距折叠，而相邻p之间以及p和父div之间有边距折叠。

让我们添加浮动元素：

.wrapper {
outline: 1px solid;
overflow: hidden;
}
.wrapper>div {
margin: 10px;
background: red;
}
div.float {
float:left;
width:50px;
height:50px;
margin:0;
background:green;
}

<div class="wrapper">
<div class="float"></div>
<div>
<p>some text here</p>
<p>some text here</p>
</div>
<div>
</div>
</div>
<div class="wrapper">
<div class="float"></div>
<div>
</div>
</div>

每个浮点元素都属于包装器创建的 BFC，并与其中的所有元素(包括p标记)交互。

如您所见，我们有一个div 元素，它不创建 BFC，也属于包装器及其子元素创建的元素。

现在让我们让内部div 创建一个 BFC：

.wrapper {
outline: 1px solid;
overflow: hidden;
}
.wrapper>div {
margin: 10px;
background: red;
}
div.float {
float:left;
width:50px;
height:50px;
margin:0;
background:green;
}

<div class="wrapper">
<div class="float"></div>
<div style="overflow:hidden">
<p>some text here</p>
<p>some text here</p>
</div>
<div>
</div>
</div>
<div class="wrapper">
<div class="float"></div>
<div >
</div>
</div>

您可以清楚地看到浮点数的行为不再相同，以及p的边距如何不再随父div 一起折叠。这是因为我们已经隔离了我们的内容，它不再与外界互动。

现在，如果我们删除所有overflow:hidden，我们将使所有元素属于由根元素(html)创建的同一BFC，并且没有人创建BFC。

.wrapper {
outline: 1px solid;
}
.wrapper>div {
margin: 10px;
background: red;
}
div.float {
float:left;
width:50px;
height:50px;
margin:0;
background:green;
}

<div class="wrapper">
<div class="float"></div>
<div >
<p>some text here</p>
</div>
<div>
</div>
</div>
<div class="wrapper">
<div class="float"></div>
<div >
</div>
</div>

我们可以清楚地看到差异以及所有元素如何与浮点元素相互作用。

---

请注意，所有这些都适用于正常流动元件和浮动元件(具有规范中描述的一些特殊行为)，但是当涉及到绝对定位时，情况就不同了。

绝对(或固定)元素为其内容创建 BFC，但不属于任何 BFC，因为：

它完全从正常流程中移除(对后来的兄弟姐妹没有影响)

而在 BFC 中，我们有：

在块格式上下文中，框从包含块的顶部开始，一个接一个地垂直布局。两个同级框之间的垂直距离由"边距"属性决定