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.
这是我的,肯定不稳定的尝试,从这个陈述中做出一些事情：
该语句考虑了一个元素X,其中：
> X有间隙,因此“clear：left;”,“clear：right”中的任何一个.
或“明确：两者;”属性已应用于它.
>由于X的顶部和底部边距是相邻的,
在正常流量的情况下,我们正在考虑以下情况：
> X上面有一个父母,下面有一个兄弟,或者
> X上面有一个兄弟姐妹,下面有一个兄弟姐妹,下面有一个父母
>然后规范说,“它的利润率随着相邻的边缘而崩溃
以下兄弟姐妹“,但最多可以有一个兄弟姐妹,
如上所述,所以这基本上必须意味着,如果有一个
兄弟姐妹之后,保证金崩溃了.
>“但是由此产生的保证金不会因底部保证金而崩溃
父块.“ – 我不明白这一点：如果底部边缘
与兄弟姐妹的上边缘相邻,然后它不能相邻
除非兄弟的高度为零,否则父块的底部边距.
我完全糊涂了.有人可以更好地解释这个陈述
方式,或许有一些说明性的例子？谢谢.
解决方法
>具有间隙的元素是一个清除设置为非空的元素并实际清除浮动的元素.
>顶部和底部边缘相邻的元素相互邻接,而不是兄弟姐妹.我们讨论的是没有边框或填充的0高度元素,因此元素的上边距和下边距相互接触.当这种情况发生时,它们会一起崩溃,这种情况称为崩溃.
现在,让我们看一个例子：
body {
border:solid;
}
#container {
margin: 20px;
background: blue;
}
#floated {
float: left;
width: 20px;
height: 20px;
background: red;
}
#cleared {
clear: left;
margin-top: 10px;
margin-bottom: 20px;
}
#following {
margin-top: 30px;
}
<body> <div id=container> <div id=floated></div> <div id=cleared></div> <div id=following></div> <div> </body>
在这里玩：http://jsbin.com/wuvilu/1/edit?html,output
由于身体上有边框,您可以看到蓝色#container周围的20px边距.红色#floated也是一个明显的20px乘20px.
然后,由于它是0高度没有填充且没有边框,#clean的顶部和底部边缘相互折叠.它们也与#following的上边缘相邻.这个崩溃边际的大小是30px,是三者中最大的.
由于#following高度为0并且没有填充且没有边框,因此我们的30px边距与#container的下边距相邻,并且会随之折叠.除了你现在引用的规则,但它没有.
由于它不会随着容器的底部边缘而坍塌,因此必须将其放置在其中的某个位置.哪里？它从#floater的下边缘上方10px开始,并向下延伸20px.为什么？ #cleared的上边距是参与此崩溃边际的最高边距,因此我们从它开始的位置开始.由于它是10px,我们的折叠边距比#floater的底边高出10px,#floater是它之前的元素.
是的,这是疯了,大多数涉及崩溃的场景都是疯狂的.崩溃是一个可怕的想法,它应该永远不会成为CSS,但它确实在人们知道更好之前,现在我们必须处理它,以及所有的疯狂后果.
