我在阅读CSS2.2，但是我真的无法理解这句话的意思，以及它所适合的场景：
If the top and bottom margins of an element with clearance p. 157 are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.
StackOverflow上有个家伙也提了一样的问题，回答者的答案我也不理解。。。
借用采纳者的知乎链接，这句的意思是：
If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.（有间隙不折叠)
哪，什么才是有间隙呢？这里的间隙clearance在css2.2中有定义。来个例子，先有个直观的理解吧：
<html>
<head>
<style>
* {padding: 0; margin: 0;}
#b1 {
width: 300px;
height: 100px;
margin-bottom: 4em;
background-color: #0d8ba1;
}
#F {
float: left;
width: 100px;
height: 70px;
background-color: yellow;
}
#b2 {
/*clear: both;*/
width: 300px;
height: 100px;
background-color: red;
margin-top: 2em;
}
</style>
</head>
<body>
<p id="b1"></p>
<p id="F"></p>
<p id="b2"></p>
</body>
</html>运行时，对比#b2有clear:both与没clear:both时，b1与b2margin的折叠情况。
设置clear:both之后，#b2为了避开浮动的F，往下移动，出现了clearance也就是空隙，b1与b2不再折叠！
另外，stack overflow那个家伙的答案我没再细究。pass。
可以看這裡：https://www.zhihu.com/question/24563593
這個說明也蠻清楚的：
http://www.raccoon-tech.com/css-margin-collapse
只要理解 clearance 產生的條件是當
和clear的元素在沒有被 clear 的時候（正常時），它的boarder top要比 float 元素的boarder bottom要高。如果 clear 的元素本來就在 float 元素下面，就不會產生 clearance。相鄰時（例如
和margin top為0 、沒有margin bottom和height），這個兩個margin 會跟著接下來相鄰元素的margin 算collapsing，但不會跟著父元素的padding計算（這情況就是只算這兩個margin）。bordermargin bottom這裡也要注意 clearance 計算是以 boarder edge 做參考，所以對於collapse 的元素，最後要注意還會吞掉與
Then the amount of clearance is set to the greater of:margin top相當的高度。margin bottommargin top