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

I'm pretty accustomed to clearing my floats by using <br style="clear:both"/> but stuff keeps on changing and I am not sure if this is the best practice.

我非常习惯于使用
来清除浮点数，但是事情一直在变化，我不确定这是否是最佳实践。

There is a CSS hack (from positioneverything) available that lets you achieve the same result without the clearing div. But... they claim the hack is a little out of date and instead you perhaps should look at this hack. But.. after reading through 700 pages of comments :) it seems there may be some places the latter hack does not work.

有一个CSS hack(来自positioneverything)可以让您在不使用clear div的情况下获得相同的结果。他们声称这次黑客攻击有点过时了，你也许应该看看这次黑客攻击。但. .在阅读了700页的评论后:)似乎有一些地方后的黑客没有工作。

I would like to avoid any javascript hacks cause I would like my clearing to work regardless of javascript being enabled.

我希望避免任何javascript攻击，因为我希望我的清理工作，而不管是否启用了javascript。

What is the current best practice for clearing divs in a browser independent way?

在浏览器独立的方式中，当前的最佳实践是什么?

14 个解决方案

#1

Update: In 2014, you should use a clearfix technique that utilized pseudo-elements, like the one mentioned by @RodrigoManguinho. This is the modern way of clearing floats. For an even more up to date method, see Nicholas Gallagher's micro clearfix:

更新:在2014年，您应该使用clearfix技术来使用伪元素，就像@ rodrigominho提到的那样。这是一种现代的清除浮动的方式。要了解更多最新的方法，请参阅Nicholas Gallagher的微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;
}

Original Answer:

最初的回答:

I really don't like using extra non-semantic markup, so I stay away from using a clearing element. Instead of just apply overflow: hidden; to the parent of the float(s) to clear them. Works cross browser, no problem. I believe overflow: auto; also works.

我真的不喜欢使用额外的非语义标记，所以我避免使用清除元素。不只是应用溢出:隐藏;对浮点数的父(s)进行清除。跨浏览器工作，没问题。我相信溢出:汽车;同样适用。

Obviously, it won't work if you want to use a different overflow property, but because of the IE6 expanding box bug, I rarely have a reason to purposely overflow my containers.

显然，如果您想使用不同的溢出属性，那么它就不会起作用，但是由于IE6的扩展盒缺陷，我很少有理由故意溢出容器。

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

查看更多关于使用溢出而不是清除以避免添加额外标记的信息。

#2

I've found that most often (myself included), this method is used in the html:

我发现大多数情况下(包括我自己)，这个方法在html中使用:

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

With this in the stylesheet:

有了这个样式表:

.clear {clear: both;}

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

In my opinion this is the best way. No need of extra DOM elements or wrong usage of overflow or any hacks.

在我看来，这是最好的办法。不需要额外的DOM元素或错误地使用溢出或任何修改。

#4

there's a bit of voodoo I tend to find myself using.

有一些巫术是我经常使用的。

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

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

This combination magically fixes a whole host of browser problems, and I've just used it for so long I've forgotten what problems it solves.

这个组合神奇地修复了许多浏览器问题，我已经使用它太久了，我已经忘记它解决了什么问题。

#5

The best way is put "overflow:auto;" in div container. It is more clean.

最好的方法是将“溢出:auto”放在div容器中。它更干净。

div.container {overflow: auto;}

more details in: http://www.quirksmode.org/css/clearing.html

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

#6

jQuery UI has some classes to fix this as well (ui-help-clearfix does something).

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

Technically <div style="clear:both;"></div> is better than <br style="clear:both;" /> because an empty div will have 0 height, thereby just clearing the floats. The <br /> will leave a space. I see nothing wrong with using the <div/> method.

技术上< div风格= "明确:;>优于
因为空div的高度为0，因此只清除浮点数。
将留下一个空格。我认为使用

方法没有什么问题。

#7

Simply adding overflow:auto; to the parent element containing the floating element(s) is an excellent fix in most cases.

简单地添加溢出:汽车;对于包含浮动元素的父元素，在大多数情况下都是一个很好的修复。

SAMPLE HTML:

HTML:示例

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

CSS:

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

As with any other method, there are some gotchas with overflow:auto; as well. In order to fix them — apply max-width:100%; height: auto; for images, and word-wrap: break-word; for text contained within the floating elements.

与其他方法一样，也存在一些溢出的问题:auto;。为了修复它们——应用最大宽度:100%;高度:汽车;用于图像，以及单词包装:break-word;用于包含在浮动元素中的文本。

[source]

(来源)

#8

I'm from the <br class='clear'/> school myself, but another solution might be to use the clear class on the element immediately following the floated one. So instead of:

我自己来自
school，但是另一个解决方案可能是在元素出现后立即使用clear类。而不是:

<div class='float_left'>...</div>
<br class='clear'/>
<div class='something_else'>...</div>

You could assign multiple classes to the element you want cleared:

您可以为您希望清除的元素分配多个类:

<div class='float_left'>...</div>
<div class='something_else clear'>...</div>

In practice though, I tend to use <br class='clear'/> pretty often. It works nicely when you have an element floating inside another element and need to clear it so that the parent recognizes the height of the content.

但是在实践中，我经常使用
。当您有一个元素在另一个元素中浮动时，并且需要清除它，以便父元素能够识别内容的高度时，它就会工作得很好。

#9

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

#10

The issue is with parent elements not adjusting to the height of its floated child elements. Best method I have found is to float the parent to force it to adjust with the heights of its floated child elements, then apply your css clear to the next element you actually want to clear. It's often necessary to add width:100% too, as without floating the parent may unexpectedly change your layout.

问题是父元素不调整其浮动子元素的高度。我发现的最好的方法是浮动父元素，迫使它调整其浮动子元素的高度，然后将css clear应用到您真正想要清除的下一个元素。通常需要添加宽度:100%也一样，因为如果没有浮动，父元素可能会出乎意料地改变布局。

As others have mentioned, its semantically best to avoid markup that is unrelated to your content such as a <br> or <div> with a clearfix class.

正如其他人所提到的，它在语义上最好避免与您的内容无关的标记，比如
或

和clearfix类。

#11

<div class='float_left'>

something else


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

this br will not leave a space.

这个br不会留下任何空间。

#12

<br clear="all"/>

works well aswell. The benefit to this over using class="clear" is that it just works and you don't have to setup extra rules in your css to make it so.

也非常有效。使用class="clear"的好处是，它只是工作，你不必在css中设置额外的规则来实现它。

#13

Yet another is the "Float nearly everything" whereby you float the parent on the same side as the floated child.

另一种是“浮动几乎所有的东西”，您可以将父类与被浮动的子类放在同一一侧。

#14

I prefer using with .clear { clear: both; } over .clear-fix:after blah blah, because when you look at the markup it's clearer what's happening. Just FYI here's my tutorial on how to use float and clear that I wrote a while ago.

我更喜欢用。clear {clear: both;} over .clear-fix:等等之后，因为当您查看标记时，会更清楚地看到正在发生的事情。这是我之前写的关于如何使用浮动和清除的教程。