CSS：清除浮动 div 内部有什么作用？答案

【问题标题】：CSS: What does clearing INSIDE a floated div do?CSS：清除浮动 div 内部有什么作用？
【发布时间】：2012-06-28 02:00:26
【问题描述】：

快速提问！将“清晰”元素放在浮动 div 内有什么作用吗？喜欢：

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

不知何故，我觉得这有助于 div 扩展以包含其中的内容。它实际上是做什么的？任何事物？谢谢！

【问题讨论】：

标签： css html css-float

【解决方案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;。

【讨论】：

我想这就是我正在考虑的情况。谢谢！

【解决方案2】：

在您的示例中，由于带有 clear:right 的 div 是嵌套的，因此它不会清除任何内容。浮动适用于同一级别的元素。如果 div 处于同一级别，则第二个 div 将出现在具有 float: right 的 div 下方。这个页面有一些关于浮动如何工作的很好的解释/示例：float tutorial

【讨论】：

【解决方案3】：

在你的情况下，影响不大。封闭的 div（清晰：右）与冗余一样好。

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

这样，您可以直观地看到您包含的 div 是否有所作为。

【讨论】：