Question

我有3个div叠加在一起。所有都具有相同的宽度和高度，例如500px x 500px。

顶部div向右浮动。第二个边距 - 左边距和边距 - 右边设置为自动。第三个漂浮左。所有都具有相同的上限50px并且全部清晰：两者。

当然有一个包装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 here http://jsfiddle.net/dhS2x/3/

Answer 1

您可以通过将以下内容添加到.haha.right类来获得所需的效果：

margin-bottom:50px;

至于为什么会发生这种情况，这与中间div没有浮动的事实有关，而其他的则是。

Answer 2

我知道这很脏。但是你可以通过在每个.haha div之后添加单独的清除div来实现这一点。如下所示。

<div class="wrapper">
<div class="haha right"><img src="wahaha.jpg"></div>
    <div class="clear"></div>
<div class="haha center"><img src="wahaha.jpg"></div>
    <div class="clear"></div>
<div class="haha left"><img src="wahaha.jpg"></div>
    <div class="clear"></div>
</div>

和CSS

.clear{clear:both;}

JS-Fiddle http://jsfiddle.net/Q4u6P/1/

Answer 3

根据W3C： http://www.w3.org/TR/CSS2/visuren.html#floats

由于浮动不在流中，因此创建了未定位的块框   在浮动箱垂直流动之前和之后，好像浮子没有   存在。

如果我的解释是正确的，那么第二个div的上边距就在那里但是设置在包装容器的边缘或其上面的任何非浮动元素上，这是由于浮动元素被认为是从正常情况中取出文件的流程。

如果你想要div1和div2之间的垂直间隙，请在div1上设置margin-bottom。

#div1{
    float: right; 
    margin-bottom: 50px;/*set margin here instead*/
}

JSFiddle：http://jsfiddle.net/luongatoolz/DxDmp/1/

使用花车时，保证金不起作用

3 个答案: