我有一个古老的问题，一个div包装两列布局。我的侧边栏是浮动的，所以我的容器div不能包装内容和侧边栏。
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复Firefox中的明显错误:
< br清楚= "所有" / > 溢出:汽车 隐藏溢出:
在我的情况下，唯一一个似乎正确工作的是<br clear="all"/>解决方案，这有点邋遢。溢出:auto给我讨厌的滚动条，溢出:隐藏肯定有副作用。 此外，IE7显然不应该因为它的错误行为而遭受这个问题，但在我的情况下，它遭受的问题和Firefox一样。
目前可用的哪种方法是最稳健的?
当前回答
这是一个相当简洁的解决方案:
/* 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/
其他回答
与其他clearfix不同，这是一个没有容器的开放式clearfix
其他清除操作要么要求被浮动元素位于标记良好的容器中，要么需要额外的语义上为空的<div>。相反，明确分离内容和标记需要严格的CSS解决方案来解决这个问题。
仅仅因为需要标记浮点数的结尾，就不允许进行无人值守的CSS排版。
如果后者是你的目标，浮点数应该对任何围绕它的东西(段落、有序和无序列表等)保持开放，直到遇到“clearfix”。例如，clearfix可以通过一个新标题来设置。
这就是为什么我使用以下clearfix与新标题:
h1 {
clear: both;
display: inline-block;
width: 100%;
}
这个解决方案在我的网站上被广泛使用，以解决以下问题:浮动的微型对象旁边的文本很短，下一个清除对象的上边距不受尊重。
它还可以防止从站点自动生成pdf时的任何人工干预。 这是一个示例页面。
一个新的显示值似乎是在一行中的作业。
display: flow-root;
来自W3规范:“元素生成一个块容器盒，并使用流布局布局其内容。它总是为其内容建立一个新的块格式上下文。”
信息: https://www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136
※如图所示、在上面的链接中,支持目前有限的后备支持像使用以下可能: https://github.com/fliptheweb/postcss-flow-root
我总是浮动网格的主要部分，并应用clear:两者;到页脚。这并不需要额外的div或类。
使用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();
}
为什么只是试图使用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中
