使用浮点数时，保证金无效
[英]Margin doesn't work when working with floats
问题描述
I have 3 divs that stack on top of one another. 
我有3个div彼此叠放。 All have the same width and height, eg 500px x 500px. 全部具有相同的宽度和高度，例如500px x 500px。
Top div float right. 顶部div向右浮动。 2nd one margin-left and margin-right are set auto. 第二个左边距和右边距设为自动。 3rd one float left. 第3个浮点向左。 All have the same margin top of 50px and all clear:both. 全部具有相同的50px顶部空白，并且全部清除：两者。
Of course there's a wrapper div wrapping the 3 divs and width 100%. 当然，有一个包装器div包裹着3个div，宽度为100％。
Question: Why is that the 2nd div margin top doesn't push that 50px margin but overlaps the top div? 问题：为什么第二个div的上边距不推动该50px的边距，但与顶部div重叠？
I have tried looking for answer in similar questions here but none are what I'm looking for. 我曾尝试在此处寻找类似问题的答案，但我所寻找的都不是。
Here's a sample of the html and css that I'm doing. 这是我正在执行的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/ JS小提琴在这里http://jsfiddle.net/dhS2x/3/
3 个解决方案
解决方案1
1 2014-07-16 14:53:31
You can get the desired effect by adding the following to the .haha.right class: 您可以通过向.haha.right类中添加以下内容来获得所需的效果：
margin-bottom:50px;
As for why this happens, it's something to do with the fact that the middle div is not being floated, whereas the others are. 至于为什么发生这种情况，这与以下事实有关：中间div没有浮动，而其他div在浮动。
解决方案2
1 2014-07-16 15:10:09
I know this is dirty. 我知道这很脏。 But you can achive this by adding separate clearing divs after each .haha div like below. 但是您可以通过在每个.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>
And CSS 和CSS
.clear{clear:both;}
JS-Fiddle http://jsfiddle.net/Q4u6P/1/ JS小提琴http://jsfiddle.net/Q4u6P/1/
解决方案3
1 2014-07-16 15:45:39
According to W3C: http://www.w3.org/TR/CSS2/visuren.html#floats
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist.
If my interpretation is right, the top margin for the second div is there but is set against the edge of the wrapper container or any non-floated elements above it, this is due to floated element being considered taken out of the normal flow of the document. 如果我的解释是正确的，则第二个div的顶部边距在那里，但设置在包装容器的边缘或其上方的任何非浮动元素的边缘，这是由于考虑到浮动元素已从包装容器的正常流程中取出文献。
if you want the vertical gap between div1 and div2, set the margin-bottom on div1 instead. 如果要在div1和div2之间设置垂直间距，请改为在div1上设置margin-bottom。
#div1{
float: right;
margin-bottom: 50px;/*set margin here instead*/
}
JSFiddle: http://jsfiddle.net/luongatoolz/DxDmp/1/ JSFiddle： http : //jsfiddle.net/luongatoolz/DxDmp/1/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.