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

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

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

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

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

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

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

当前回答

我总是使用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和现代浏览器)添加对旧浏览器的支持。

其他回答

我总是浮动网格的主要部分，并应用clear:两者;到页脚。这并不需要额外的div或类。

你也可以把这个放在你的CSS中:

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

*:first-child+html .cb{zoom: 1} /* for IE7 */

并添加类“cb”到你的父div:

<div id="container" class="cb">

您不需要在原始代码中添加任何其他内容。

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

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

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

我也浮动#content，这样两列都包含浮动。也因为它将允许您清除#content内的元素而不清除侧栏。

包装器也是如此，您需要将其设置为块格式化上下文来包装这两列。

这篇文章提到了一些你可以使用的触发器: 块格式化上下文。

.clearFix:after { 
    content: "";
    display: table;  
    clear: both;  
}

推荐文章