我有一个古老的问题，一个div包装两列布局。我的侧边栏是浮动的，所以我的容器div不能包装内容和侧边栏。
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复Firefox中的明显错误:
< br清楚= "所有" / > 溢出:汽车 隐藏溢出:
在我的情况下，唯一一个似乎正确工作的是<br clear="all"/>解决方案，这有点邋遢。溢出:auto给我讨厌的滚动条，溢出:隐藏肯定有副作用。 此外，IE7显然不应该因为它的错误行为而遭受这个问题，但在我的情况下，它遭受的问题和Firefox一样。
目前可用的哪种方法是最稳健的?
当前回答
我也浮动#content，这样两列都包含浮动。也因为它将允许您清除#content内的元素而不清除侧栏。
包装器也是如此，您需要将其设置为块格式化上下文来包装这两列。
这篇文章提到了一些你可以使用的触发器: 块格式化上下文。
其他回答
clearfix是一种元素自动清除自身的方法， 这样您就不需要添加额外的标记。
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.cleaner {
clear: both;
}
通常你需要做以下事情:
<div style="float: left;">Sidebar</div>
<div class="cleaner"></div> <!-- Clear the float -->
使用clearfix，您只需要这样做
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
overflow属性可以用来清除没有额外标记的浮点数:
.container { overflow: hidden; }
这适用于所有浏览器，除了IE6，你所需要做的就是启用hasLayout(缩放是我的首选方法):
.container { zoom: 1; }
http://www.quirksmode.org/css/clearing.html
一个新的显示值似乎是在一行中的作业。
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
你试过这个吗:
<div style="clear:both;"/>
我用这个方法没有任何问题。
当我们在div元素中使用float属性时，clearfix就可以解决这个问题。如果我们使用两个div元素一个作为float:left;另一个是float:right;我们可以对两个div元素的父元素使用clearfix。如果我们拒绝使用clearfix不必要的空间填充下面的内容和网站结构将被打破。
