Question

当我阅读CSS视觉格式specification时，看到了

普通流中的框属于格式上下文，在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 definition：

块格式化上下文是Web页面可视CSS渲染的一部分。在该区域中会出现块状框的布局，并且在其中浮动会与其他元素交互。

那么我们可以阅读

设置溢出：自动创建一个包含浮点数的新BFC。现在，我们已成为布局中的微型布局。任何子元素都将包含在其中。

换句话说，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>

每个float元素都属于包装器创建的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>

我们可以清楚地看到它们之间的区别以及所有元素如何相互作用，尤其是float元素。

请注意，所有这些都适用于普通流量元件和浮子元件（具有规范中描述的某些特殊行为），但是在绝对定位方面却有所不同。

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

将其从常规流中完全删除（对以后的同级没有影响）

而在BFC中，我们有：

在块格式设置上下文中，从包含块的顶部开始，垂直地将框一个接一个地布置。两个兄弟箱之间的垂直距离取决于'margin'属性

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

2 个答案: