我有一个古老的问题，一个div包装两列布局。我的侧边栏是浮动的，所以我的容器div不能包装内容和侧边栏。
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复Firefox中的明显错误:
< br清楚= "所有" / > 溢出:汽车 隐藏溢出:
在我的情况下，唯一一个似乎正确工作的是<br clear="all"/>解决方案，这有点邋遢。溢出:auto给我讨厌的滚动条，溢出:隐藏肯定有副作用。 此外，IE7显然不应该因为它的错误行为而遭受这个问题，但在我的情况下，它遭受的问题和Firefox一样。
目前可用的哪种方法是最稳健的?
当前回答
我只用:-
.clear:after{
clear: both;
content: "";
display: block;
}
工作最好，兼容IE8+:)
其他回答
最新的标准，用于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)。
这是一个相当简洁的解决方案:
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
它可以在Firefox 3.5+， Safari 4+， Chrome, Opera 9+， IE 6+中运行 包括:before选择器是不需要清除浮点数的， 但它可以防止现代浏览器的页边距崩溃。这 确保在缩放:1时与IE 6/7的视觉一致性 应用。
从http://nicolasgallagher.com/micro-clearfix-hack/
使用SASS, clearfix是:
@mixin clearfix {
&:before, &:after {
content: '';
display: table;
}
&:after {
clear: both;
}
*zoom: 1;
}
它的用法如下:
.container {
@include clearfix;
}
如果你想要新的clearfix:
@mixin newclearfix {
&:after {
content:"";
display:table;
clear:both;
}
}
假设你正在使用这个HTML结构:
<div id="container">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>
下面是我将使用的CSS:
div#container {
overflow: hidden; /* makes element contain floated child elements */
}
div#content, div#sidebar {
float: left;
display: inline; /* preemptively fixes IE6 dobule-margin bug */
}
我一直使用这个集合，它对我来说工作得很好，即使在IE6中也是如此。
.clearFix:after {
content: "";
display: table;
clear: both;
}
