0

在下面的代码中，我有两个 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>
4

1 回答 1

0

是的，这很混乱。阅读有关折叠边距的 CSS 规范。

具体来说，

“如果具有间隙的元素的顶部和底部边距相邻，则它的边距会与后续兄弟的相邻边距一起折叠，但生成的边距不会与父块的底部边距折叠。”

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

http://jsfiddle.net/6bfYU/

于 2012-06-28T01:56:48.660 回答