min-height下CSS外边距折叠机制的疑问与验证咨询

首先，先明确你提到的W3C规范条款：

W3C规定，对于height为auto、min-height为0的正常流块级盒子，若该盒子无底部内边距和底部边框，且其子元素的底部外边距未与带有清除的顶部外边距折叠，则该盒子的底部外边距会与其最后一个正常流块级子元素的底部外边距折叠。

但这里的关键是，这条规则是针对min-height:0的特定场景，当你给父盒子设置min-height:500px（即min-height>0）且保持height:auto时，仍然会触发底部外边距折叠——这是符合规范补充规则的，并不是浏览器行为与规范不符。

我们来看你的示例代码：

* { 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>

在这个示例中：

• 父盒子.block没有底部内边距和边框，height保持默认的auto，两个子元素总高度刚好填满min-height:500px的要求
• 最后一个子元素.child_2的底部外边距30px没有被清除规则（clear）影响

此时，父盒子的margin-bottom:10px会和子元素的margin-bottom:30px发生折叠，最终.block和下方.content之间的间距是30px（取两个外边距中的较大值）——这就是外边距折叠的典型表现，你的观察完全准确。

简单来说，min-height>0且height:auto的父盒子，只要满足“无底部内边距/边框、子元素无清除影响”这两个条件，依然会和最后一个子元素发生底部外边距折叠，这是规范允许的行为。

内容的提问来源于stack exchange，提问作者Eva