[英]Margin doesn't work when working with floats
我有3個div彼此疊放。 全部具有相同的寬度和高度，例如500px x 500px。
頂部div向右浮動。 第二個左邊距和右邊距設為自動。 第3個浮點向左。 全部具有相同的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小提琴在這里http://jsfiddle.net/dhS2x/3/
您可以通過向.haha.right類中添加以下內容來獲得所需的效果：
margin-bottom:50px;
至於為什么發生這種情況，這與以下事實有關：中間div沒有浮動，而其他div在浮動。
我知道這很臟。 但是您可以通過在每個.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;}
根據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/
負邊距頂部結合浮點數不能按預期工作（僅在Firefox中）
[英]negative margin-top in combination with floats doesn't work as expected (only in Firefox)
當margin：0自動時將圖像居中； 絕對定位不起作用
[英]Centring an image when margin:0 auto; and absolute positioning doesn't work
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.