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有所作为。