我有一个古老的问题，一个div包装两列布局。我的侧边栏是浮动的，所以我的容器div不能包装内容和侧边栏。
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复Firefox中的明显错误:
< br清楚= "所有" / > 溢出:汽车 隐藏溢出:
在我的情况下，唯一一个似乎正确工作的是<br clear="all"/>解决方案，这有点邋遢。溢出:auto给我讨厌的滚动条，溢出:隐藏肯定有副作用。 此外，IE7显然不应该因为它的错误行为而遭受这个问题，但在我的情况下，它遭受的问题和Firefox一样。
目前可用的哪种方法是最稳健的?
当前回答
如果浮动容器有父元素，在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的方式。
其他回答
考虑到我不打算发布的大量回复。然而，这种方法可能会帮助到别人，就像它曾经帮助过我一样。
尽可能远离漂浮物
值得一提的是，我像埃博拉病毒一样避开花车。有很多原因，我并不孤单;阅读Rikudo关于什么是clearfix的回答，你会明白我的意思。用他自己的话来说:……在布局中使用浮动元素越来越不受欢迎，而是使用更好的替代品……
除了浮动，还有其他好的(有时更好的)选择。随着技术的进步和改进，flexbox(和其他方法)将被广泛采用，而浮点数将成为一个糟糕的记忆。也许是CSS4?
浮动错误行为和失败的清除
首先，有时候，你可能认为你是安全的，直到你的救生圈被刺穿，你的html流开始下沉:
在下面的代码依赖http://codepen.io/omarjuvera/pen/jEXBya中，使用<div classes ="clear"></div>(或其他元素)清除浮点数的做法很常见，但不受欢迎且反语义。
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>
CSS
div {
border: 1px solid #f00;
width: 200px;
height: 100px;
}
div.floated {
float: left;
}
.clear {
clear: both;
}
section {
border: 1px solid #f0f;
}
然而，就在你认为你的花车值得起航的时候，砰!随着屏幕尺寸变得越来越小，你会看到奇怪的行为，如下图所示(同样的http://codepen.io/omarjuvera/pen/jEXBya):
你为什么要关心这个? 大约80%(或更多)的设备都是小屏幕的移动设备。台式电脑/笔记本电脑不再是王者。
事情并没有就此结束
这不是浮动的唯一问题。有很多，但在这个例子中，有些人可能会说，你所要做的就是把你的浮动放在一个容器中。但正如您在代码依赖和图形中看到的那样，情况并非如此。这显然让事情变得更糟:
HTML
<div id="container" class="">
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>
CSS
#container {
min-height: 100px; /* To prevent it from collapsing */
border: 1px solid #0f0;
}
.floated {
float: left;
border: 1px solid #f00;
width: 200px;
height: 100px;
}
.clear {
clear: both;
}
section {
border: 1px solid #f0f;
}
至于结果呢?
是一样的!
至少你知道，你会开始一个CSS派对，邀请各种选择器和属性的派对;使你的CSS比你开始的时候更混乱。只是为了修理你的花车。
CSS Clearfix拯救
这个简单而适应性强的CSS是一个美人和“救世主”:
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
就是这样!它真的可以在不破坏语义的情况下工作，我提到过它可以吗?：
同样的例子……HTML
<div class="clearfix">
<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
</div>
<section>Below</section>
CSS
div.floated {
float: left;
border: 1px solid #f00;
width: 200px;
height: 100px;
}
section {
border: 4px solid #00f;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
现在我们不再需要<div classes ="clear"></div> <!——充当一堵墙——>，让语义警察高兴。这还不是唯一的好处。这个clearfix可以响应任何屏幕大小，而不需要使用最简单的@media。换句话说，它将保持你的浮动容器在检查和防止洪水。最后，它提供了对旧浏览器的支持，只需一个小的空手道斩=)
这里又是clearfix
.clearfix:before, .clearfix:after {
content: "";
display: table;
clear: both;
zoom: 1; /* ie 6/7 */
}
我也浮动#content，这样两列都包含浮动。也因为它将允许您清除#content内的元素而不清除侧栏。
包装器也是如此，您需要将其设置为块格式化上下文来包装这两列。
这篇文章提到了一些你可以使用的触发器: 块格式化上下文。
使用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;
}
}
我最喜欢的方法是在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>
我建议使用下面的，这是从http://html5boilerplate.com/
/* >> The Magnificent CLEARFIX << */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
} /* Hides from IE-mac \*/
.clearfix {
display: block;
}
