我有一个古老的问题，一个div包装两列布局。我的侧边栏是浮动的，所以我的容器div不能包装内容和侧边栏。
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复Firefox中的明显错误:
< br清楚= "所有" / > 溢出:汽车 隐藏溢出:
在我的情况下，唯一一个似乎正确工作的是<br clear="all"/>解决方案，这有点邋遢。溢出:auto给我讨厌的滚动条，溢出:隐藏肯定有副作用。 此外，IE7显然不应该因为它的错误行为而遭受这个问题，但在我的情况下，它遭受的问题和Firefox一样。
目前可用的哪种方法是最稳健的?
当前回答
使用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;
}
}
其他回答
诚实地;所有的解决方案似乎都是修复渲染错误的黑客…我错了吗?
我发现<br clear="all" />是最简单、最简单的。到处看到class="clearfix"并不能触动那些反对无关的markup元素的人的感情，不是吗?你只是把问题画在了另一幅画布上。
我还使用了display: hidden解决方案，这很好，不需要额外的类声明或HTML标记…但有时您需要元素溢出容器，例如。漂亮的丝带和饰带
我在官方的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
使用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();
}
假设你正在使用这个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中也是如此。
我总是浮动网格的主要部分，并应用clear:两者;到页脚。这并不需要额外的div或类。
