根据WC3规范：
“高度”为“auto”的流入块框的底部边距与其最后一个流入块级子项的底部边距折叠，如果：
盒子没有底部填充物，并且
盒子没有下边框，并且
子项的下边距既不会与具有间隙的上边距折叠，也不会与框的上边距折叠（如果盒子的最小高度非零）。
我们需要知道的是，
clearance是盒子向下移动以清除其块格式化上下文中的浮动时所获得的状态。
这是通过clear:left
或
clear:right或
clear:both完成的。如果该框在其被清除的一侧与浮动框并排，则该框将向下移动，直到其border-box 完全低于浮动框的边距框。 现在考虑这个例子：
body {
border: 1px solid red;
}
main {
padding-top:1px;
margin-bottom:100px;
}
aside {
background-color: tan;
height: 100px;
width: 200px;
float: left;
}
header {
margin-top:90px;
}
footer {
margin-bottom:100px;
}<body>
<main>
<aside>The aside</aside>
<header></header>
<footer></footer>
</main>
</body>
aside 元素是浮动元素。主元素上的顶部填充是为了确保没有任何东西可以与主元素或主体元素的上边距折叠。
由于 header 和 footer 元素没有内容，因此主元素上的 margin-bottom、header 元素上的 margin-top 和 footer 元素上的 margin-bottom 都相邻并折叠在一起，使得总垂直边距为100 像素。 body 元素内容框包含它们，使其高度为 101px。 （1 像素内边距 + 100 像素边距）
现在，让我们将
clear:left
添加到标题元素。
body {
border: 1px solid red;
}
main {
padding-top:1px;
margin-bottom:100px;
}
aside {
background-color: tan;
height: 100px;
width: 200px;
float: left;
}
header {
margin-top:90px;
clear:left;
}
footer {
margin-bottom:100px;
}<body>
<main>
<aside>The aside</aside>
<header></header>
<footer></footer>
</main>
</body>
现在body元素的高度是211px！
header 元素的边框框向下移动 10px，以清除浮动。即标题元素具有
clearance。由于 header 元素的上边距附加到边框框，因此它也向下移动 10px。然后页脚的下边距与页眉的上边距折叠，并将页眉的边框框再向下推 10 像素 (100 像素 - 90 像素)。
我们现在已经达到了您问题的条件。页脚元素是其父元素（主元素）的最后一个流入块级子元素。页脚元素没有底部填充或边框。它的下边距与有间隙的元素的上边距折叠在一起。
所以结果是页脚的下边距不能与主元素的下边距折叠，所以body元素的内容框的总高度是1px + 100px + 10px + 100px。
最后，考虑一下当标题的上边距设置为 101px 而不是 90px 时会发生什么。
body {
border: 1px solid red;
}
main {
padding-top:1px;
margin-bottom:100px;
}
aside {
background-color: tan;
height: 100px;
width: 200px;
float: left;
}
header {
margin-top:101px;
clear:left;
}
footer {
margin-bottom:100px;
}<body>
<main>
<aside>The aside</aside>
<header></header>
<footer></footer>
</main>
</body>
请注意，现在主元素的底部边距再次与其他边距折叠。这是因为虽然 header 元素仍然有
clear:left
，但是它的 margin top 大于 float 的高度，所以它的 border box 已经低于 float 的底部了，所以不需要向下移动。由于它不会移动，因此标题元素没有间隙，因此边距可能会全部折叠。