The CSS 2.1 specification, section 8.3.1 on collapsing margins states:
Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
It took me a while to realize that the block formatting context is the context that is established by the parent and applied to the children, so that to make any difference, the float or overflow properties have to be adjusted on the parent element (rather than to the children).
In the following code snippet, border heights of adjacent child div elements collapse, so that between any two child div elements there is a vertical spacing of max(20px, 20px) = 20px instead of 20px + 20px = 40px, and border heights between the first child element and the parent div, and between the last child element and the parent div, are also max(20px, 0px) = 20px instead of 20px + 20px = 40px, respectively. Note that no collapsing appears in the horizontal direction, just as per the CSS 2.1 spec.
<!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>
Had the top margin of the red box1 element not collapsed with its parent, such margin would not have pushed the black background down below the margin, and the red box1's margin would be superimposed upon the black background of the parent element. A similar argument applies to the blue box1 element on the bottom.
Now, just as the CSS 2.1 spec mentions, if either of the "float: left;" or "overflow: hidden;" parts of the containing div are commented out, then the top and bottom borders of the parent element (in this case it is 0) and the top (in this case 10px) border of the first child, and the bottom (in this case 10px) border of the bottom child, are separated, yieling the result shown below:
Now, and here comes the question:
What was the rationale for introducting this rule into CSS? Was it just a random decision, or was it motivated by some real, practical example? (knowing this would also help me remember the rule, other than satisfying my curiosity).
Thanks.
The only plausible explanation I can give is that block formatting contexts are atomic, in the sense that boxes in one block formatting context can never interact with boxes in another block formatting context. This rule on collapsing margins appears to be in the same vein as the rule that floats never intrude into other block formatting contexts or exit their own block formatting contexts into ancestor block formatting contexts.
To expand on this: the in-flow descendants of a box that establishes a new block formatting context participate in that box's block formatting context, whereas the box itself participates in a block formatting context that's established somewhere higher up in the layout tree. So the margins of the box itself are expected to collapse with boxes in that same block formatting context, but not descendant boxes.
Section 9.4.1 seems to support this:
Vertical margins between adjacent block-level boxes in a block formatting context collapse.
Notice that it says "adjacent block-level boxes in a block formatting context" — this would imply that the fact that margins don't collapse across block formatting contexts is an inherent property of a block formatting context. But this is only my interpretation of the spec; I'm not the author so I can't say for sure if this was the intended meaning.
来源：https://stackoverflow.com/questions/19756678/css-2-1-spec-rationale-for-not-collapsing-margins-of-parent-when-parent-is-flo