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是嵌套的，因此它不会清除任何内容。 Float适用于同一级别的元素。如果div处于同一级别，则第二个div将出现在具有float：right的div下方。这个页面有一些很好的解释/示例浮动如何工作：float tutorial

Answer 3

在你的情况下，影响不大。附上的div（清楚：右）和冗余一样好。

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

通过这种方式，你可以直观地看出你所附的div是否有所不同。