我有一个古老的问题，一个div包装两列布局。我的侧边栏是浮动的，所以我的容器div不能包装内容和侧边栏。
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复Firefox中的明显错误:
< br清楚= "所有" / > 溢出:汽车 隐藏溢出:
在我的情况下，唯一一个似乎正确工作的是<br clear="all"/>解决方案，这有点邋遢。溢出:auto给我讨厌的滚动条，溢出:隐藏肯定有副作用。 此外，IE7显然不应该因为它的错误行为而遭受这个问题，但在我的情况下，它遭受的问题和Firefox一样。
目前可用的哪种方法是最稳健的?
当前回答
最新的标准，用于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)。
其他回答
我也浮动#content，这样两列都包含浮动。也因为它将允许您清除#content内的元素而不清除侧栏。
包装器也是如此，您需要将其设置为块格式化上下文来包装这两列。
这篇文章提到了一些你可以使用的触发器: 块格式化上下文。
诚实地;所有的解决方案似乎都是修复渲染错误的黑客…我错了吗?
我发现<br clear="all" />是最简单、最简单的。到处看到class="clearfix"并不能触动那些反对无关的markup元素的人的感情，不是吗?你只是把问题画在了另一幅画布上。
我还使用了display: hidden解决方案，这很好，不需要额外的类声明或HTML标记…但有时您需要元素溢出容器，例如。漂亮的丝带和饰带
clearfix是一种元素自动清除自身的方法， 这样您就不需要添加额外的标记。
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.cleaner {
clear: both;
}
通常你需要做以下事情:
<div style="float: left;">Sidebar</div>
<div class="cleaner"></div> <!-- Clear the float -->
使用clearfix，您只需要这样做
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
.clearFix:after {
content: "";
display: table;
clear: both;
}
如果浮动容器有父元素，在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的方式。
