二格框[第一浮動，第二清除]，第二的餘量似乎不推先

在下面的代碼中，我有兩個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>

來源

2012-06-28 mach77

我不不知道爲什麼，但如果你在'＃box1'中設置'margin-bottom：20px;'而不是'margin-top：20px;''＃box2'，你會得到預期的結果。也許它可以幫助你找到原因。當您找到時，請與我們分享。 –

是的，這很混亂。閱讀CSS spec on collapsing margins。

具體地說，

「如果有間隙的元素的頂部和底部頁邊被鄰接，其邊緣崩潰與以下兄弟姐妹的鄰接邊緣但所得餘量不與父塊的底部邊緣坍塌「。

要爲您需要的保證金適用於沒有間隙的元素，在這種情況下，第一個div，像這樣讓你要找的效果：

http://jsfiddle.net/6bfYU/

來源

2012-06-28 01:56:48 Ben

我不確定你所引用的句子與所給出的情況有什麼關係。正如您所指出的那樣，帶間隙的元素是第二個元素，它恰好是最後一個流入的子元素。它只有一個頂部邊距，並且這個邊距不與任何東西相連。 – BoltClock

啊，你說得對。這不是真正的邊緣崩潰。這只是花車的正常行爲。就利潤率而言，它們並不存在。您可以在巡視工具中看到應用的邊距。數學解釋在這裏：http://www.w3.org/TR/CSS21/visuren.html#propdef-clear – Ben

它看起來像清除就足以讓頂邊完全消失，對於第二個元素與浮子齊平。我並不完全熟悉清算算法的工作原理，但... – BoltClock

二格框[第一浮動，第二清除]，第二的餘量似乎不推先

回答

相關問題