我有一个古老的问题，一个div包装两列布局。我的侧边栏是浮动的，所以我的容器div不能包装内容和侧边栏。
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复Firefox中的明显错误:
< br清楚= "所有" / > 溢出:汽车 隐藏溢出:
在我的情况下，唯一一个似乎正确工作的是<br clear="all"/>解决方案，这有点邋遢。溢出:auto给我讨厌的滚动条，溢出:隐藏肯定有副作用。 此外，IE7显然不应该因为它的错误行为而遭受这个问题，但在我的情况下，它遭受的问题和Firefox一样。
目前可用的哪种方法是最稳健的?
当前回答
我总是使用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和现代浏览器)添加对旧浏览器的支持。
其他回答
.clearFix:after {
content: "";
display: table;
clear: both;
}
使用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;
}
}
你试过这个吗:
<div style="clear:both;"/>
我用这个方法没有任何问题。
你也可以把这个放在你的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">
您不需要在原始代码中添加任何其他内容。
我在官方的CLEARFIX-Method中发现了一个bug: 交通部没有字体大小的规定。 如果你设置height = 0并且DOM-Tree中的第一个元素具有类clearfix，那么页面底部总会有12px的边距:)
你必须像这样修正它:
/* float clearing for everyone else */
.clearfix:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
它现在是yaml布局的一部分…看看吧，非常有趣! http://www.yaml.de/en/home.html
