我有一个古老的问题，一个div包装两列布局。我的侧边栏是浮动的，所以我的容器div不能包装内容和侧边栏。
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复Firefox中的明显错误:
< br清楚= "所有" / > 溢出:汽车 隐藏溢出:
在我的情况下，唯一一个似乎正确工作的是<br clear="all"/>解决方案，这有点邋遢。溢出:auto给我讨厌的滚动条，溢出:隐藏肯定有副作用。 此外，IE7显然不应该因为它的错误行为而遭受这个问题，但在我的情况下，它遭受的问题和Firefox一样。
目前可用的哪种方法是最稳健的?
当前回答
根据所生成的设计，下面每种clearfix CSS解决方案都有其自身的优点。
clearfix确实有有用的应用程序，但它也被用作黑客。在你使用clearfix之前，也许这些现代的css解决方案是有用的:
css flexbox css网格
现代Clearfix解决方案
容器溢出:自动;
清除浮动元素的最简单方法是在包含元素上使用样式overflow: auto。这个解决方案适用于所有现代浏览器。
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
一个缺点是，在外部元素上使用某些边距和填充组合可能会导致滚动条出现，但这可以通过将边距和填充放在另一个包含父元素的元素上来解决。
使用' overflow: hidden '也是一个明确的解决方案，但不会有滚动条，然而使用hidden将裁剪位于包含元素之外的任何内容。
注意:在本例中，浮动元素是一个img标记，但也可以是任何html元素。
Clearfix重新加载
Thierry Koblentz在CSSMojo上写道:最新的clearfix重新加载。他指出，通过放弃对oldIE的支持，解决方案可以简化为一条css语句。此外，当带有clearfix的元素是兄弟元素时，使用display: block(而不是display: table)允许页边距正确折叠。
.container::after {
content: "";
display: block;
clear: both;
}
这是clearfix的最新版本。
⋮
⋮
旧的Clearfix解决方案
下面的解决方案对于现代浏览器不是必需的，但对于针对较老的浏览器可能有用。
请注意，这些解决方案依赖于浏览器错误，因此只有在上述解决方案都不适合您的情况下才应该使用。
它们大致按时间顺序列出。
"Beat That ClearFix"，一个针对现代浏览器的ClearFix
CSS Mojo的Thierry Koblentz指出，当针对现代浏览器时，我们现在可以在属性/值之前删除缩放和::，只需使用:
.container::after {
content: "";
display: table;
clear: both;
}
这个解决方案不支持IE 6/7…是故意的!
Thierry还提供了一个忠告:“如果你从头开始一个新项目，那就去做吧，但不要把这个技术与你现在拥有的技术交换，因为即使你不支持oldIE，你现有的规则也能防止保证金崩溃。”
微Clearfix
最新的和全球采用的clearfix解决方案，Nicolas Gallagher的Micro clearfix。
已知支持:Firefox 3.5+， Safari 4+， Chrome, Opera 9+， IE 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
溢出财产
通常情况下，当定位的内容不会显示在容器的边界之外时，这种基本方法是首选的。
http://www.quirksmode.org/css/clearing.html -解释了如何解决与此技术相关的常见问题，即在容器上设置宽度:100%。
.container {
overflow: hidden;
display: inline-block;
display: block;
}
与其使用display属性来为IE设置“hasLayout”，不如使用其他属性来触发元素的“hasLayout”。
.container {
overflow: hidden;
zoom: 1;
display: block;
}
使用overflow属性清除浮点数的另一种方法是使用下划线hack。IE会应用带有下划线前缀的值，其他浏览器不会。缩放属性在IE中触发hasLayout:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
虽然这是有效的……使用黑客是不理想的。
PIE:简单的清理方法
这种老式的“易清除”方法的优点是允许定位的元素悬挂在容器的边界之外，代价是更棘手的CSS。
这个解决方案相当古老，但你可以在http://www.positioniseverything.net/easyclearing.html上了解关于“位置就是一切”的所有信息
元素使用"clear"属性
当你快速地将一些东西组合在一起时，快速而肮脏的解决方案(有一些缺点):
<br style="clear: both" /> <!-- So dirty! -->
缺点
It's not responsive and thus may not provide the desired effect if layout styles change based upon media queries. A solution in pure CSS is more ideal. It adds html markup without necessarily adding any semantic value. It requires a inline definition and solution for each instance rather than a class reference to a single solution of a “clearfix” in the css and class references to it in the html. It makes code difficult to work with for others as they may have to write more hacks to work around it. In the future when you need/want to use another clearfix solution, you won't have to go back and remove every <br style="clear: both" /> tag littered around the markup.
其他回答
我已经尝试了所有这些解决方案，当我使用下面的代码时，会自动添加一个大的边距到<html>元素:
.clearfix:after {
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
最后，我通过添加font-size: 0来解决边缘问题;到上面的CSS。
诚实地;所有的解决方案似乎都是修复渲染错误的黑客…我错了吗?
我发现<br clear="all" />是最简单、最简单的。到处看到class="clearfix"并不能触动那些反对无关的markup元素的人的感情，不是吗?你只是把问题画在了另一幅画布上。
我还使用了display: hidden解决方案，这很好，不需要额外的类声明或HTML标记…但有时您需要元素溢出容器，例如。漂亮的丝带和饰带
为什么只是试图使用css hack来做1行HTML做的工作。为什么不使用语义html tu放断点返回行?
Fo me真的更好用:
<br style="clear:both" />
如果你不想在你的html中添加任何样式，你只需要使用class作为你的break 然后输入。clear {clear:both;}。
这样做的好处:
html返回行的语义使用 如果没有CSS加载，它将工作 不需要额外的CSS代码和Hack 不需要用CSS模拟br，它已经存在于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 */
}
如果浮动容器有父元素，在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的方式。
