我可以使用哪些“clearfix”方法?

我有一个古老的问题，一个div包装两列布局。我的侧边栏是浮动的，所以我的容器div不能包装内容和侧边栏。

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

似乎有很多方法可以修复Firefox中的明显错误:

< br清楚= "所有" / > 溢出:汽车隐藏溢出:

在我的情况下，唯一一个似乎正确工作的是<br clear="all"/>解决方案，这有点邋遢。溢出:auto给我讨厌的滚动条，溢出:隐藏肯定有副作用。此外，IE7显然不应该因为它的错误行为而遭受这个问题，但在我的情况下，它遭受的问题和Firefox一样。

目前可用的哪种方法是最稳健的?

当前回答

为什么只是试图使用css hack来做1行HTML做的工作。为什么不使用语义html tu放断点返回行?

Fo me真的更好用:

<br style="clear:both" />

如果你不想在你的html中添加任何样式，你只需要使用class作为你的break 然后输入。clear {clear:both;}。

这样做的好处:

html返回行的语义使用如果没有CSS加载，它将工作不需要额外的CSS代码和Hack 不需要用CSS模拟br，它已经存在于HTML中

2011-05-20 12:52:47

其他回答

从引导程序Clearfix:

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

2012-12-05 07:12:19

我总是使用micro-clearfix:

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.cf {
    *zoom: 1;
}

在Cascade框架中，我甚至在块级元素上默认应用它。在我看来，默认情况下将它应用于块级元素，使块级元素的行为比传统行为更直观。它还使我更容易向Cascade Framework(它支持IE6-8和现代浏览器)添加对旧浏览器的支持。

2014-01-07 19:02:52

如果浮动容器有父元素，在ie6中使用overflow:hidden/auto和height就足够了。

#测试中的任何一个都可以工作，下面所述的HTML可以清除浮动。

#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

如果这在ie6中不能正常工作，只需要浮动父节点来清除浮动。

#test {
  float: left; // using float to clear float
  width: 99%;
}

从来没有真正需要任何其他类型的清理。也许是我编写HTML的方式。

2009-08-27 13:19:40

诚实地;所有的解决方案似乎都是修复渲染错误的黑客…我错了吗?

我发现<br clear="all" />是最简单、最简单的。到处看到class="clearfix"并不能触动那些反对无关的markup元素的人的感情，不是吗?你只是把问题画在了另一幅画布上。

我还使用了display: hidden解决方案，这很好，不需要额外的类声明或HTML标记…但有时您需要元素溢出容器，例如。漂亮的丝带和饰带

2010-07-07 16:39:45