Question

the W3C CSS 2.1 spec says this中正常流程的定义：

正常流程

正常流程中的框属于格式化上下文，可能是   阻止或内联，但不能同时阻止。块级盒子   参与块格式化上下文。内联级框   参与内联格式化上下文。

所以我的第一个问题是：“参与”的含义究竟是什么？

在“块格式化上下文”（BFC）的定义中，它说：

在块格式化上下文中，框一个接一个地布局，垂直，从包含块的顶部开始。垂直的两个兄弟框之间的距离由'边距'决定属性。 a中相邻块级框之间的垂直边距阻止格式化上下文崩溃。

众所周知，在一个块容器框（即 NOT “块格式化上下文”）中，框的布局与上面为“块格式化上下文”指定的定义完全相同。 / p>

所以我的第二个问题是：“参与”意味着块容器布局的行为与“块格式化框”相同？

由于我上一个问题的原因，我引用了这个定义：

在块格式化上下文中，每个框的左外边缘都接触到包含块的左边缘（从右到左格式化，右边边缘触摸）。即使在浮子的存在下也是如此（尽管如此）除非盒子，否则盒子的线盒可能会因浮子而收缩建立一个新的块格式化上下文（在这种情况下，框由于漂浮物本身可能会变窄。

当我们创建包含的div（不是BFC）块容器框时一个图像和一个段落，它的行为与上面的定义完全相同：

img {
  float: left;
}

p {
  border: 1px solid red;
}

<div>
  <img src="http://placehold.it/100x100&text=1">
  <p>
    the div element is not block formatting context but behaves like block formatting context!!! the div element is not block formatting context but behaves like block formatting context!!! the div element is not block formatting context but behaves like
    block formatting context!!! the div element is not block formatting context but behaves like block formatting context!!! the div element is not block formatting context but behaves like block formatting context!!!
  </p>
</div>

即使我们将p元素更改为div中的块格式化上下文，它的行为与下面的定义完全相同：

img {
  float: left;
}

p {
  border: 1px solid red;
  overflow: auto;
}

<div>
  <img src="http://placehold.it/100x100&text=1">
  <p>
    the div element is not block formatting context but behaves like block formatting context!!! the div element is not block formatting context but behaves like block formatting context!!! the div element is not block formatting context but behaves like
    block formatting context!!! the div element is not block formatting context but behaves like block formatting context!!! the div element is not block formatting context but behaves like block formatting context!!!
  </p>
</div>

如果我们将div更改为块格式化上下文，它的行为与前面的示例完全相同：

div {
  overflow: hidden;
}

img {
  float: left;
}

p {
  border: 1px solid red;
  overflow: hidden;
  margin: 0;
}

<div>
  <img src = "http://placehold.it/100x100&text=1">
  <p>
  the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> the div element is a block formatting context <b>NOW</b> 
  </p>
</div>

......我是对的吗？

Answer 1

当一个盒子被称为参与某些格式化上下文时，它只是意味着该元素是根据该格式化上下文的规则布局的。如果元素参与块格式化上下文，则它是块级别，并且由块布局控制。如果元素参与内联格式化上下文，则它是内联级别的，并且由内联布局控制。等等。

＆＃34;阻拦容器盒＆＃34;和＆＃34;阻止格式化上下文＆＃34;是两个不同的，只是非常松散相关的概念。你似乎在混淆他们，这是不明智的。

块容器框仅在特定条件下建立块格式化上下文。规范中列出了这种情况的标准，但基本上块容器框没有建立BFC的唯一时间是display: block; overflow: visible; float: none; position: static/relative（来自{{3） }}）。

如规范中所述，每个块级别框都参与一些块格式化上下文。它的父块容器是否建立BFC并不重要。如果其父母没有建立BFC，那么父母的父母，或父母的父母，或树中更高的一些其他祖先 - 一直到根元素 - 确实如此。这意味着单个块格式化上下文可以 - 并且几乎总是如此 - 包含许多嵌套级别的元素。这统称为正常流量。

即使您有整个块框布局，如果它们都没有建立BFC，那么它们都参与由根元素建立的相同BFC（并且根元素是保证建立一个）。在下面的示例中，所有三个元素都参与根元素的BFC，因此它们由块布局控制，即使它们都没有建立自己的BFC：

<body>
  <div>
    <p>
  </div>
</body>

overflow: hidden对存在浮点数时块格式化上下文的影响进行了讨论here，但简而言之，浮点数永远不会侵入其他块格式化上下文，这就是为什么要生成p建立自己的BFC会导致它因浮动而变窄。让div建立自己的BFC并不会改变任何事情，因为p仍然会参与部分 BFC而不管你是什么更改的 BFC参与其中。

什么是“参与”CSS 2.1规范中“正常流程”定义的含义？

1 个答案: