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

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

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

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

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

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


当前回答

我已经尝试了所有这些解决方案,当我使用下面的代码时,会自动添加一个大的边距到<html>元素:

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

最后,我通过添加font-size: 0来解决边缘问题;到上面的CSS。

其他回答

最新的标准,用于inunit . CSS和Bourbon -两个非常广泛使用和维护良好的CSS/Sass框架:

.btcf:after {
    content:"";
    display:block;
    clear:both;
}

笔记

请记住,clearfixes本质上是对flexbox布局的一种hack,现在可以以更简单和更智能的方式提供。CSS浮动最初是为内联内容的流动而设计的——就像长文本文章中的图像一样——而不是网格布局之类的。除非你的目标浏览器是老式的(不是Edge) Internet Explorer,否则你的目标浏览器支持flexbox,所以它值得你花时间学习。

这并不支持IE7。你不应该支持IE7。这样做会继续将用户暴露在不固定的安全漏洞中,并使所有其他web开发人员的生活更加困难,因为它减少了用户和组织切换到更安全的现代浏览器的压力。

2012年7月,Thierry Koblentz宣布并解释了这个修正。它从尼古拉斯·加拉格尔2011年的微清理中摆脱了不必要的重量。在这个过程中,它释放了一个伪元素供您自己使用。这已经更新为使用display: block而不是display: table(再次归功于Thierry Koblentz)。

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

overflow属性可以用来清除没有额外标记的浮点数:

.container { overflow: hidden; }

这适用于所有浏览器,除了IE6,你所需要做的就是启用hasLayout(缩放是我的首选方法):

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html

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

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

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

我只用:-

.clear:after{
  clear: both;
  content: "";
  display: block;
}

工作最好,兼容IE8+:)