我有一个古老的问题，一个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+:)
其他回答
我最喜欢的方法是在css / scss文档中创建一个clearfix类，如下所示
.clearfix{
clear:both;
}
然后在我的html文档中调用它，如下所示
<html>
<div class="div-number-one">
Some Content before the clearfix
</div>
<!-- Let's say we need to clearfix Here between these two divs --->
<div class="clearfix"></div>
<div class="div-number-two">
Some more content after the clearfix
</div>
</html>
你也可以把这个放在你的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">
您不需要在原始代码中添加任何其他内容。
overflow属性可以用来清除没有额外标记的浮点数:
.container { overflow: hidden; }
这适用于所有浏览器，除了IE6，你所需要做的就是启用hasLayout(缩放是我的首选方法):
.container { zoom: 1; }
http://www.quirksmode.org/css/clearing.html
从引导程序Clearfix:
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
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中也是如此。
