Question

折叠边距上的CSS 2.1 specification, section 8.3.1说明：

建立新块格式化上下文的元素的边距（例如作为花车和'溢出'而不是'可见'的元素）不会与流动的孩子一起崩溃。

我花了一段时间才意识到块格式化上下文是由父母建立并应用于儿童的上下文，为了使任何差异，浮动或溢出属性具有要调整父元素（而不是子元素）。

在以下代码段中，相邻子div元素的边框高度崩溃，所以在任何两个子div元素之间有一个垂直间距最大（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>

Case 1

如果红色box1元素的上边距未与其父元素折叠，则此边距将为没有把黑色背景推到边缘以下，而红色方框1的边距会被叠加在父元素的黑色背景上。类似的论点也适用到底部的蓝色box1元素。

现在，就像CSS 2.1规范提到的那样，如果是“float：left;”或“溢出：隐藏;” 注释掉包含div的部分，然后是父级的顶部和底部边框元素（在这种情况下为0）和第一个孩子的顶部（在本例中为10px）边界，和底部（在这种情况下是10px）底部孩子的边界，是分开的，yieling的结果如下所示：

enter image description here

现在，问题出现了：

将此规则引入CSS的理由是什么？这只是一个随机的决定，还是被一些真实的，实际的例子激发了？（知道这也会对我有所帮助记住规则，而不是满足我的好奇心。）

感谢。

Answer 1

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

为了扩展这一点：建立新块格式化上下文的框的流入后代参与该框的块格式化上下文，而框本身参与块格式化在布局树中更高位置建立的上下文。因此，预期框本身的边距将在同一块格式化上下文中使用框折叠，但不会在后代框中折叠。

Section 9.4.1似乎支持这一点：

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

请注意，它表示块格式化上下文中的相邻块级框＆＃34; - 这意味着边距不会在块格式化上下文中崩溃这一事实是块格式化上下文的固有属性。但这只是我对规范的解释;我不是作者，所以我无法确定这是否是预期的含义。

CSS 2.1规范：不折叠父级边距的理由（当父级为浮动或溢出而不是可见时）

1 个答案: