Question

在下面的代码中，我有两个div框。第一个是float：left，第二个是clear：left，所以它位于第一个下面。我的问题是为什么margin-top：20px没有推出第一个div？

<head>
 <style>
 div { width:100px; height:100px; background-color:green; }
 #box1 { float:left; }
 #box2 { background-color:red; clear:left; margin-top:20px; }
 </style>
</head>
<body>
 <div id="box1"></div>
 <div id="box2"></div>
</body>

Answer 1

是的，这令人困惑。阅读CSS spec on collapsing margins。

具体地，

“如果具有间隙的元素的顶部和底部边距相邻，则其边缘会随着后续兄弟的邻接边缘而折叠，但是所产生的边距不会随着父块的下边缘而崩溃。”

要获得您正在寻找的效果，您需要将边距应用于没有间隙的元素，在这种情况下是第一个div，如下所示：

http://jsfiddle.net/6bfYU/

两个div盒[第一个浮子，第二个清除]，第二个边缘似乎没有先推开

1 个答案: