我有一个古老的问题，一个div包装两列布局。我的侧边栏是浮动的，所以我的容器div不能包装内容和侧边栏。
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复Firefox中的明显错误:
< br清楚= "所有" / > 溢出:汽车 隐藏溢出:
在我的情况下，唯一一个似乎正确工作的是<br clear="all"/>解决方案，这有点邋遢。溢出:auto给我讨厌的滚动条，溢出:隐藏肯定有副作用。 此外，IE7显然不应该因为它的错误行为而遭受这个问题，但在我的情况下，它遭受的问题和Firefox一样。
目前可用的哪种方法是最稳健的?
当前回答
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! -->
其他回答
我已经尝试了所有这些解决方案，当我使用下面的代码时，会自动添加一个大的边距到<html>元素:
.clearfix:after {
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
最后，我通过添加font-size: 0来解决边缘问题;到上面的CSS。
#内容{浮动:左;} #栏{浮动:左;} .clear{明确:;显示:块;高度:0 px;宽度:0 px;溢出:隐藏;} < div id = "容器" > <div id="content">text 1 </div> . <div id="sidebar">text 2</div> . < div class = "清晰" > < / div > < / div >
使用LESS (http://lesscss.org/)，你可以创建一个方便的clearfix helper:
.clearfix() {
zoom: 1;
&:before {
content: '';
display: block;
}
&:after {
content: '';
display: table;
clear: both;
}
}
然后将其用于有问题的容器，例如:
<!-- HTML -->
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
/* LESS */
div#container {
.clearfix();
}
overflow属性可以用来清除没有额外标记的浮点数:
.container { overflow: hidden; }
这适用于所有浏览器，除了IE6，你所需要做的就是启用hasLayout(缩放是我的首选方法):
.container { zoom: 1; }
http://www.quirksmode.org/css/clearing.html
我总是使用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和现代浏览器)添加对旧浏览器的支持。
