CSS浮動左/右清除問題：大缺口

Question

我有一個css頁面，「float:right; clear:right」廣告和主文本中的幾個塊意味着像圖像一樣流動，使用「float：left」。問題在於主文本流量框有一個很大的差距：他們開始僅在具有float的廣告框之後才顯示：right。

這是一個測試頁面：http://xahlee.org/js/ex/test_float.html

我不明白這一點。誰能解釋一下？

Answer 1

我很努力地想出更好的詞來解釋爲什麼比「這只是它的工作方式」。

解決它的最簡單的方法是用float: right附上兩個「廣告框」在自己的div：

<div style="float: right;"> 
    <div class="adbox1">adbox1</div> 
    <div class="adbox2">adbox2</div> 
</div> 

Answer 2

的間隙由您明確造成的：右2號adbox和事實流量箱按照文檔順序跟隨在adboxes。

如果您希望在段落旁邊的「流」旁邊放置這些框，請將它們放在希望它們旁邊浮動的段落標記之前。

Answer 3

體毛產生的縫隙;

解決方案：

body { margin: 0; } 

大多數CSS重置工具有此規則。