Question

我已经习惯于使用<br style="clear:both"/>清除我的花车，但是东西一直在变化，我不确定这是不是最好的做法。

有一个CSS hack（来自positioneverything）可以让你在没有清除div的情况下获得相同的结果。但是......他们声称黑客有点过时了，相反你或许应该看看this hack。但是...阅读了700页的评论后:)似乎可能有一些地方后者黑客不起作用。

我想避免任何javascript hacks因为我希望我的清除工作，无论启用javascript。

目前以独立于浏览器的方式清除div的最佳做法是什么？

Answer 1

更新：2014年，你应该使用一种使用伪元素的clearfix技术，就像@RodrigoManguinho提到的那样。这是清除花车的现代方式。有关更新的方法，请参阅Nicholas Gallagher的微观修正：

/**
 * 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;也有效。

显然，如果你想使用不同的溢出属性，它将不起作用，但由于IE6扩展盒错误，我很少有理由故意溢出我的容器。

See more info on using overflow instead of clear to avoid adding extra markup

Answer 2

我发现最常见的（包括我自己），这个方法在html中使用：

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

在样式表中使用：

.clear {clear: both;}

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元素或错误使用溢出或任何黑客攻击。

Answer 4

我倾向于发现自己正在使用的伏都教。

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

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

这种组合神奇地修复了一大堆浏览器问题，我刚刚使用它已经忘记了它解决了什么问题。

Answer 5

最好的方法是“overflow：auto;”在div容器中。它更干净。

div.container {overflow: auto;}

更多详细信息：http://www.quirksmode.org/css/clearing.html

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;。

[source]

Answer 7

jQuery UI也有一些类来解决这个问题（ui-help-clearfix做了一些事情）。

技术上<div style="clear:both;"></div>优于<br style="clear:both;" />，因为空div的高度为0，因此只需清除浮点数。 <br />将留出空间。我认为使用<div/>方法没有错。

Answer 8

.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>

Answer 9

问题是父元素没有调整到浮动子元素的高度。我找到的最好方法是float父级强制它调整浮动子元素的高度，然后将你的css clear应用到你想要清除的下一个元素。通常还需要添加width:100%，因为没有浮动，父级可能会意外地更改您的布局。

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

Answer 10

<div class='float_left'>

something else


<br style="clear:both;">
</div>

这个br不会留下空间。

Answer 11

现在，在 2021 年，您可以将 display: flow-root 用于父元素而不是 clearfix hack。

.box {
  display: flow-root;
}

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

Answer 12

<br clear="all"/>

运作良好。使用class =“clear”的好处是它只是工作而你不必在你的css中设置额外的规则来实现它。

Answer 13

另一个是“漂浮几乎所有东西”，你将父母漂浮在浮动孩子的同一侧。

Answer 14

我更喜欢使用.clear {clear：both; } over .clear-fix：等等等等，因为当你看到标记时，它会更清楚发生了什么。请注意，这是我前一段时间写的关于how to use float and clear的教程。

清除CSS样式“float”的最佳方法是什么？

14 个答案: