我有一个古老的问题，一个div包装两列布局。我的侧边栏是浮动的，所以我的容器div不能包装内容和侧边栏。
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复Firefox中的明显错误:
< br清楚= "所有" / > 溢出:汽车 隐藏溢出:
在我的情况下，唯一一个似乎正确工作的是<br clear="all"/>解决方案，这有点邋遢。溢出:auto给我讨厌的滚动条，溢出:隐藏肯定有副作用。 此外，IE7显然不应该因为它的错误行为而遭受这个问题，但在我的情况下，它遭受的问题和Firefox一样。
目前可用的哪种方法是最稳健的?
当前回答
一个新的显示值似乎是在一行中的作业。
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
其他回答
我建议使用下面的，这是从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;
}
考虑到我不打算发布的大量回复。然而，这种方法可能会帮助到别人，就像它曾经帮助过我一样。
尽可能远离漂浮物
值得一提的是，我像埃博拉病毒一样避开花车。有很多原因，我并不孤单;阅读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 */
}
.clearFix:after {
content: "";
display: table;
clear: both;
}
为什么只是试图使用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中
我已经尝试了所有这些解决方案，当我使用下面的代码时，会自动添加一个大的边距到<html>元素:
.clearfix:after {
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
最后，我通过添加font-size: 0来解决边缘问题;到上面的CSS。
