The CSS 2.1 规范，第 8.3.1 节在折叠边距上指出：
建立新块格式化上下文的元素的边距（例如 因为浮动和带有“可见”以外的“溢出”的元素）不会 与他们流入的孩子一起崩溃。
我花了一段时间才意识到块格式化上下文是 由父母建立并应用于孩子的上下文， 因此，要产生任何区别，浮动或溢出属性具有 在父元素（而不是子元素）上进行调整。
在下面的代码片段中，相邻子div元素的边框高度 折叠，以便任意两个子 div 元素之间存在垂直间距 max(20px, 20px) = 20px 而不是 20px + 20px = 40px，以及边框高度 第一个子元素和父级 div 之间以及最后一个子元素之间 和父 div 也分别是 max(20px, 0px) = 20px 而不是 20px + 20px = 40px。 请注意，按照 CSS 2.1 规范，水平方向不会出现折叠。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
* { margin: 0; border: 0; padding: 0; }
</style>
</head>
<body style="background: green;">
<div id="wrapper" style="width: 400px; background: black;
/* overflow: hidden; *//* float: left; */">
<div id="box1" style="margin: 20px; height: 100px; background: red;">
</div>
<div id="box2" style="margin: 20px; height: 100px; background: blue;">
</div>
<div id="box3" style="margin: 20px; height: 100px; background: red;">
</div>
<div id="box4" style="margin: 20px; height: 100px; background: blue;">
</div>
</div>
</body>
</html>
如果红色 box1 元素的上边距没有与其父元素折叠，则这样的边距将 没有将黑色背景推到边距以下，而红色 box1 的边距会 叠加在父元素的黑色背景上。类似的论点也适用 到底部的蓝色 box1 元素。
现在，正如 CSS 2.1 规范提到的，如果“float: left;”中的任何一个或“溢出：隐藏；” 包含 div 的部分被注释掉，然后是父级的顶部和底部边框 元素（在本例中为 0）和第一个子元素的顶部边框（在本例中为 10px）， 和底部子元素的底部（在本例中为 10px）边框是分开的，产生 结果如下图所示：
现在，问题来了：
将这条规则引入 CSS 的理由是什么？难道这只是一个偶然的决定 或者是受到一些真实的、实际的例子的启发？ （知道这也会帮助我 记住规则，除了满足我的好奇心）。
Thanks.
我能给出的唯一合理的解释是块格式化上下文是原子的，从某种意义上说，一个块格式化上下文中的框可以never与另一个块格式化上下文中的框交互。折叠边距的这条规则似乎与浮动永远不会侵入其他块格式化上下文或将其自己的块格式化上下文退出到祖先块格式化上下文中的规则相同。
对此进行扩展：建立新块格式化上下文的框的流入后代参与该框的块格式化上下文，而框itself参与在布局树中较高位置建立的块格式化上下文。因此，框本身的边距预计会与同一块格式化上下文中的框折叠，但不会与后代框折叠。
第 9.4.1 节似乎支持这一点：
块格式化上下文中相邻块级框之间的垂直边距折叠。
请注意，它说“块格式化上下文中的相邻块级框”——这意味着边距不会跨块格式化上下文折叠，这是块格式化上下文的固有属性。但这只是我对规范的解释；我不是作者，所以我不能确定这是否是原意。