如何工作边缘塌陷与最小高度？

Question

我在规范中读到过：

W3C

“自动”的“高度”和‘最小高度’为零的“”在流中块框的底部边缘与其最后一个在流块级子级的底部边缘一起崩溃，如果该框没有底部填充和底部边框，并且孩子的底部边缘没有带清除的顶部边缘的话。

但至于最低身高，我不能说规格告诉我们真相。下面是一些例子：

​

* {
  margin: 0;
  padding: 0;
}


/*parent with min-height*/
.block {
  width: 500px;
  min-height: 500px;
  background: rgba(4, 127, 214, 1);
  margin-bottom: 10px;
}

.child_1 {
  width: 500px;
  height: 250px;
  background: yellow;
}

.child_2 {
  width: 500px;
  height: 250px;
  background: yellowgreen;
  margin-bottom: 30px;
}

.content {
  width: 100%;
  height: 50px;
  background: pink;
}

<div class="block">
  <div class="child_1"></div>
  <div class="child_2"></div>
</div>

<div class="content"></div>

​

这个例子向我们展示了边距可以随着最小高度而崩溃.我说的对吗？

Answer 1

规范的那个版本可能有点混乱。您可以检查更新的版本(2.2)，其中的主要规则是：

两者都属于垂直相邻的框边，即形成下列对之一： ..。

• 如果父具有“自动”计算的高度，则最后一个流子的底部边缘和其父节点的底部边缘。

然后你引用的规则将成为：

“高度”为“auto”的在流块框的底部边缘与其上一个流块级子级的底部边缘一起崩溃，如果：

• 盒子没有底垫，而且
• 该框没有底部边框，并且
• 孩子的底部边缘既不会出现有间隙的顶部边缘塌陷，也不会(如果盒子的最小高度为非零)与盒子的顶部边缘。

min-height已经不在了。

顺便说一句，您引用的规则是上面列出的主要规则的一个含义，其中没有关于min-height的任何内容，因此，在最小高度与汽车不同的情况下，如果出现这种情况(即使这是不直观的)，我也不会感到惊讶。

更新

一个相关的老问题浮动元素的边距塌陷，为什么会增加额外的边距？。现在，这是一个不相关的问题，因为我们无法再现这种行为，但在所有情况下都出现了边缘崩溃，即使min-height大于儿童的高度。

我想垂直相邻的框边是理解正在发生的事情的关键。如果min-height使两个元素不再相邻，则不会发生边距折叠(这是合乎逻辑的)，否则就会发生边距折叠(如您的示例中所示)。