我有一个古老的问题，一个div包装两列布局。我的侧边栏是浮动的，所以我的容器div不能包装内容和侧边栏。
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复Firefox中的明显错误:
< br清楚= "所有" / > 溢出:汽车 隐藏溢出:
在我的情况下，唯一一个似乎正确工作的是<br clear="all"/>解决方案，这有点邋遢。溢出:auto给我讨厌的滚动条，溢出:隐藏肯定有副作用。 此外，IE7显然不应该因为它的错误行为而遭受这个问题，但在我的情况下，它遭受的问题和Firefox一样。
目前可用的哪种方法是最稳健的?
当前回答
从引导程序Clearfix:
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
其他回答
我已经尝试了所有这些解决方案，当我使用下面的代码时，会自动添加一个大的边距到<html>元素:
.clearfix:after {
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
最后，我通过添加font-size: 0来解决边缘问题;到上面的CSS。
这是一个相当简洁的解决方案:
/* For modern browsers */
.cf:before,
.cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
它可以在Firefox 3.5+， Safari 4+， Chrome, Opera 9+， IE 6+中运行 包括:before选择器是不需要清除浮点数的， 但它可以防止现代浏览器的页边距崩溃。这 确保在缩放:1时与IE 6/7的视觉一致性 应用。
从http://nicolasgallagher.com/micro-clearfix-hack/
我最喜欢的方法是在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>
我们要解决什么问题?
有两个重要的考虑浮动的东西:
包含子浮动。这意味着所讨论的元素使自己足够高，以包装所有浮动后代。(他们不会在外面闲逛。) 将子代与外部浮标隔离。这意味着元素内部的后代应该能够使用clear: both，并且不能与元素外部的浮点数交互。
块格式化上下文
There's only one way to do both of these. And that is to establish a new block formatting context. Elements that establish a block formatting context are an insulated rectangle in which floats interact with each other. A block formatting context will always be tall enough to visually wrap its floating descendants, and no floats outside of a block formatting context may interact with elements inside. This two-way insulation is exactly what you want. In IE, this same concept is called hasLayout, which can be set via zoom: 1.
有几种方法可以建立块格式化上下文，但我推荐的解决方案是display: inline-block with width: 100%。(当然，使用width: 100%时通常会有一些注意事项，所以使用box-sizing: border-box或将填充、边距和边框放在不同的元素上。)
最健壮的解决方案
float最常见的应用可能是双列布局。(可以扩展为三列。)
首先是标记结构。
<div class="container">
<div class="sidebar">
sidebar<br/>sidebar<br/>sidebar
</div>
<div class="main">
<div class="main-content">
main content
<span style="clear: both">
main content that uses <code>clear: both</code>
</span>
</div>
</div>
</div>
现在是CSS。
/* Should contain all floated and non-floated content, so it needs to
* establish a new block formatting context without using overflow: hidden.
*/
.container {
display: inline-block;
width: 100%;
zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}
/* Fixed-width floated sidebar. */
.sidebar {
float: left;
width: 160px;
}
/* Needs to make space for the sidebar. */
.main {
margin-left: 160px;
}
/* Establishes a new block formatting context to insulate descendants from
* the floating sidebar. */
.main-content {
display: inline-block;
width: 100%;
zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}
自己试试吧
去JS Bin玩一下代码，看看这个解决方案是如何从头开始构建的。
传统clearfix方法被认为是有害的
传统的clearfix解决方案的问题是，它们使用两种不同的呈现概念来实现IE和其他所有人的相同目标。在IE中，他们使用hasLayout来建立一个新的块格式化上下文，但对于其他人来说，他们使用生成的框(:after)和clear: both，这不会建立一个新的块格式化上下文。这意味着事情不会在所有情况下都表现相同。关于为什么这样不好的解释，请参见您所知道的关于Clearfix的一切都是错误的。
我建议使用下面的，这是从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;
}
