CSS 2.1 规范：不折叠父级边距的基本原理（当父级为浮动或具有可见以外的溢出时）答案

【问题标题】：CSS 2.1 spec: rationale for not collapsing margins of parent (when parent is float or has overflow other than visible)CSS 2.1 规范：不折叠父级边距的基本原理（当父级为浮动或具有可见以外的溢出时）
【发布时间】：2013-11-14 10:04:26
【问题描述】：

折叠边距上的CSS 2.1 specification, section 8.3.1 状态：

建立新块格式化上下文的元素的边距（例如因为浮动和具有“溢出”而不是“可见”的元素）不和他们流入的孩子一起崩溃。

我花了一段时间才意识到块格式化上下文是由父级建立并应用于子级的上下文，为了有所作为，浮动或溢出属性具有在父元素（而不是子元素）上进行调整。

在下面的代码sn-p中，相邻子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 的基本原理是什么？是否只是一个随机的决定，还是受到一些真实的、实际的例子的启发？（知道这也会帮助我记住规则，除了满足我的好奇心）。

谢谢。

【问题讨论】：

CSS 2.1 spec: 8.3.1 Collapsing margins: cannot properly interpret special case: clarification sought的可能重复
不，这是一个单独的案例。我也是那篇文章的作者，我想要一个单独的答案，因为这是一个单独的问题。
这似乎是在将 CSS2 修改为 CSS2.1 时对块格式上下文（以及一般块格式）进行的过多更改之一，记录在 here（注意它意味着适用于 all 块格式化上下文根 - 该修复程序已列出 here）。如果您在邮件列表中找不到答案，那可能比这里更好。

标签： css css-float overflow margins

【解决方案1】：

我能给出的唯一合理的解释是块格式化上下文是原子的，从某种意义上说，一个块格式化上下文中的框可以永远与另一个块格式化上下文中的框交互。这条关于折叠边距的规则似乎与浮动永远不会侵入其他块格式化上下文或将它们自己的块格式化上下文退出到祖先块格式化上下文的规则相同。

对此进行扩展：建立新块格式化上下文的盒子的流入后代参与该盒子的块格式化上下文，而盒子本身参与已建立的块格式化上下文布局树中更高的位置。因此，盒子本身的边距预计会与同一块格式化上下文中的盒子一起折叠，而不是后代盒子。

Section 9.4.1 似乎支持这一点：

块格式化上下文中相邻块级框之间的垂直边距折叠。

请注意，它说的是“块格式化上下文中的相邻块级框”——这意味着边距不会跨块格式化上下文折叠这一事实是块格式化上下文的固有属性。但这只是我对规范的解释；我不是作者，所以我不能确定这是否是预期的意思。

【讨论】：