CSS：什麼清除INSIDE浮動的div嗎？

Question

快問！ 做一個「清除」元素內浮動div做什麼？ 像：

<div style="float: right"> 
blah blah 
<div style="clear: right"></div> 
</div> 

某處不知何故，我得到的印象，這有助於擴大DIV包含它裏面的內容。它實際上做了什麼？什麼？ 謝謝！

Answer 1

只包含浮動元素的元素會在高度上崩潰，因爲浮動元素不再處於正常文檔流中。在這種情況下，在之後清除浮筒將允許容納元件保持其高度。

<div id="container"> 
    <div id="float1" style="float:left;"></div> 
    <div id="float2" style="float:right;"></div> 
    <!-- if you use a clearing element, it should go here --> 
</div> 

注意，還有其他方法來清除比使用清除元件，如添加overflow:hidden;到容器的風格。

Answer 2

在你的例子中，由於具有clear：right的div是嵌套的，所以它不會清除任何東西。浮點適用於同一級別的元素。如果divs處於同一級別，則第二個div將出現在具有浮動的div下方：右側。這個頁面有一些很好的解釋/如何漂浮的例子工程：float tutorial

Answer 3

在你的情況下，沒有太大的影響。封閉的div（clear：right）和冗餘一樣好。

<div style="float: right; background: red;" > 
blah blah 
<div style="clear: right; background: blue;"></div> 
</div> 

有了這個，你可以直觀地看到，如果你封閉的div有所作爲。