如何最好地清除CSS样式中的“浮动”？

Question

我习惯使用 <br style="clear:both"/> 来清除浮动，但是技术一直在改变，不确定这是否是最佳实践。

有一个 CSS hack（来自positioneverything）可以让你达到同样的效果，无需使用清除div。但是...他们声称这个hack有点过时了，你或许应该看看这个hack。但是...经过阅读700页的评论 :)，似乎后者在某些地方不起作用。

我想避免任何javascript hack，因为我希望我的清晰度能够在javascript启用或禁用的情况下工作。

当前如何以浏览器无关的方式清除div？

- sambo99

---

当我看到这个标题时，我以为这将是一个愚蠢的问题，回答是“float f = 0.0”。抱歉，今天早上我还没有喝咖啡 :-) - paxdiablo

无论什么问题涉及到"Javascript"和"浏览器独立"，答案都是jQuery。 - paxdiablo

@Pax：我也是。我编辑了标题。 - Michael Haren

@SamSaffron，您问题中的链接指向包含多个清除浮动的解决方案的页面。因此，不清楚您所指的方法是哪些...（顺便说一句，我认为在父元素上使用overflow:auto是最好的解决方案） - Šime Vidas

Answer 1

更新：在2014年，您应该使用一种利用伪元素的clearfix技术，例如@RodrigoManguinho提到的方法。这是清除浮动的现代方法。要获取更加新的方法，请参考Nicholas Gallagher的Micro clearfix:

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

翻译后的答案:

我不喜欢使用额外的非语义标记，因此避免使用清除元素。相反，只需将 overflow: hidden; 应用于浮动元素的父级即可清除它们。跨浏览器都有效，没有问题。我相信 overflow: auto; 也可以。

显然，如果您想使用不同的 overflow 属性，这种方法将无法奏效，但由于 IE6 扩展框错误，我很少有理由故意使容器溢出。

更多关于使用 overflow 而非 clear 避免添加额外标记的信息。

- Bryan M.

---

现在甚至可以更容易一些——http://cssmojo.com/latest_new_clearfix_so_far/ - Ian Dunn

Answer 2

我发现大多数情况下（包括我自己），这种方法在HTML中使用：

<div class="clear"></div>

有了这个样式表：

.clear {clear: both;}

- Mike

---

不，我不这么认为；因为他正在使用DIV，所以你需要用一个点。 - Pat Hermens

点号应该只出现在样式表中 - 现在已经修复。 - noswonky

如果 .clear 的样式永远不会改变，那么 class="clear" 怎么比 style="clear:both" 好呢？仅仅增加一层间接性并不能真正等同于更好的设计。 - tylerl

@tylerl，由于各种原因，鼓励将语义和表现分离。甚至有一些关于从严格文档类型中删除style属性的争论。 - Geoff

@tylerl 我同意，人们经常忘记间接引用会影响清晰度。我认为“分离语义和表现”被高估了（但这是另一个辩论）。但在这种情况下，类可以节省一些打字（我使用“class = cb”，它更小）。 - Dustin Boswell

分离事物是一个不错且有用的模式。假设Internet Explorer 10出现了一个新的bug（这并不难），你需要添加zoom:1来清除浮动（只是一个虚假的例子，为了说明问题）。如果你使用style="clear:both"，你将需要更新成千上万行代码来添加"zoom:1"以使其在IE10上正常工作。而使用class="clear"的人只需要在CSS中更新1行即可。 - Rodrigo Manguinho

Answer 3

.clear-fix:after
{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clear-fix
{
    zoom: 1;
}

<div class="clear-fix">
    <div class="left">Some Div With Float</div>
    <div class="left">Another Div With Float</div>
</div>

在我看来，这是最好的方法。不需要额外的DOM元素或错误使用溢出或任何黑客技巧。

- Rodrigo Manguinho

---

我认为这是最美的解决方案。如果您选择这个，请不要忘记在IE特定的样式表中添加这个，否则IE 7会感到难过。.clear-fix { zoom: 1; } - Filip

你是对的Filip。我编辑了我的回复，提供完整的解决方案。+1给你的观察。 - Rodrigo Manguinho

自从很久以前就一直在使用这个。在2012年，这仍然是权威的解决方案吗？我希望5代更新的浏览器能够提供更直接的解决方案... - jgivoni

这不是最好的解决方案。如果您使用此方法来清除浮动，而这些浮动本身位于浮动元素内部，则clear:both会导致巨大的间隙。尽可能使用overflow:hidden。这仅在需要浮动可见溢出时有用。 - mrbinky3000

Answer 4

我发现自己经常使用一些神秘的技巧。

<span class="clear"></span> 

span.clear { 
    display: block; 
    clear: both; 
    width: 1px; 
    height: 0.001%;
    font-size: 0px; 
    line-height: 0px; 
} 

这种组合神奇地解决了许多浏览器问题，我已经使用它很长时间，忘记了它解决了什么问题。

- Kent Fredric

---

为什么不直接使用<div>标签，而要用<span style="display:block;">呢？ - aleemb

@aleemb：在我看来，当你必须在<p>和类似情况下使用它时，它非常有用，因为不能使用<div>。 - its_me

Answer 5

最好的方法是在 div 容器中添加 "overflow:auto;"。这样更加清晰。

div.container {overflow: auto;}

更多细节请见：http://www.quirksmode.org/css/clearing.html

- user391990

---

我喜欢这个解决方案，它可以工作（根据我的测试），而且你不需要添加其他标签。 - mrmuggles

Answer 6

在大多数情况下，只需将overflow:auto;添加到包含浮动元素的父元素中即可解决问题。

示例 HTML：

<div class="container">
    <div class="child">...</div>
    <div class="another-child">...</div>
<div>

CSS:

.child {
    float: right;
    word-wrap: break-word;
}

.child img {
    max-width: 100%;
    height: auto; /* of course, this is default */
}

.child p {
    word-wrap: break-word;
}

.container {
    overflow: auto;
}

与其他方法一样，overflow:auto;也有一些需要注意的地方。为了解决这些问题，对于图像应用max-width:100%; height: auto;，对于浮动元素中包含的文本应用word-wrap: break-word;。

[来源]

- its_me

Answer 7

jQuery UI有一些类可以解决这个问题（ui-help-clearfix执行某些操作）。

从技术上讲，<div style="clear:both;"></div>比<br style="clear:both;" />更好，因为一个空的div将具有0高度，从而清除浮动。 <br />会留下一个空格。使用<div/>方法没有问题。

- goldenratio

Answer 8

现在，在2021年，您可以使用display: flow-root来代替clearfix hack作为父元素。

.box {
  display: flow-root;
}

截至2021年3月，根据Can I Use data，全球91.35%的浏览器可以处理display: flow-root。

- alihardan

Answer 9

问题出在父元素不能自动适应其浮动子元素的高度。我发现最好的方法是将父元素float以强制它适应其浮动子元素的高度，然后将您的css clear应用于您实际想要清除的下一个元素。通常需要添加width:100%，因为如果不浮动父级，则可能会意外更改布局。

正如其他人所提到的，最好避免与内容无关的标记，例如<br>或带有clearfix类的<div>。

- scottsanders

Answer 10

.floatWrapper {
   overflow:hidden;
   width:100%;
   height:100%;
}
.floatLeft {
   float:left;
}


<div class="floatWrapper">
    <div class="floatLeft">
        Hello World!
    </div>
    <div class="floatLeft">
       Whazzzup!
    </div>
</div>

- mrbinky3000

---

多年后又回到这里...你不再需要使用width:100%或height:100%，只需在父容器上使用overflow:hidden即可。 - mrbinky3000