我有 3 个 div 相互堆叠。全部具有相同的宽度和高度，例如500 像素 x 500 像素。
顶部 div 向右浮动。第二个 margin-left 和 margin-right 设置为自动。剩下第三个漂浮物。 所有的顶部边距都相同，均为 50 像素，并且全部清晰:两者。
当然有一个包装器 div 包装了 3 个 div，宽度为 100%。
问题: 为什么第二个 div 的边距顶部没有插入 50px 边距，而是与顶部的 div 重叠？
我曾尝试在这里寻找类似问题的答案，但没有一个是我正在寻找的。
这是我正在做的 html 和 css 示例。
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper{width:100%; clear:both;}
.haha{width:500px; height:500px; margin-top:50px; clear:both;}
.haha.right{float:right;}
.haha.left{float:left}
.haha.center{margin-left:auto; margin-right:auto;}
</style>
</head>
<body>
<div class="wrapper">
<div class="haha right"><img src="wahaha.jpg"></div>
<div class="haha center"><img src="wahaha.jpg"></div>
<div class="haha left"><img src="wahaha.jpg"></div>
</div>
</body>
</html>
JS fiddle 在这里 http://jsfiddle.net/dhS2x/3/
最佳答案
在.haha.right类中添加以下内容即可得到想要的效果:
margin-bottom:50px;
至于为什么会出现这种情况，是因为中间的div没有 float ，而其他的div float 了。
关于html - 使用 float 时 margin 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24783591/