我有一个古老的问题,一个div包装两列布局。我的侧边栏是浮动的,所以我的容器div不能包装内容和侧边栏。

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

似乎有很多方法可以修复Firefox中的明显错误:

< br清楚= "所有" / > 溢出:汽车 隐藏溢出:

在我的情况下,唯一一个似乎正确工作的是<br clear="all"/>解决方案,这有点邋遢。溢出:auto给我讨厌的滚动条,溢出:隐藏肯定有副作用。 此外,IE7显然不应该因为它的错误行为而遭受这个问题,但在我的情况下,它遭受的问题和Firefox一样。

目前可用的哪种方法是最稳健的?


当前回答

overflow属性可以用来清除没有额外标记的浮点数:

.container { overflow: hidden; }

这适用于所有浏览器,除了IE6,你所需要做的就是启用hasLayout(缩放是我的首选方法):

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html

其他回答

假设你正在使用这个HTML结构:

<div id="container">
  <div id="content">
  </div>
  <div id="sidebar">
  </div>
</div>

下面是我将使用的CSS:

div#container {
    overflow: hidden;    /* makes element contain floated child elements */
}

div#content, div#sidebar {
    float: left;
    display: inline;    /* preemptively fixes IE6 dobule-margin bug */
}

我一直使用这个集合,它对我来说工作得很好,即使在IE6中也是如此。

我也浮动#content,这样两列都包含浮动。也因为它将允许您清除#content内的元素而不清除侧栏。

包装器也是如此,您需要将其设置为块格式化上下文来包装这两列。

这篇文章提到了一些你可以使用的触发器: 块格式化上下文。

我已经尝试了所有这些解决方案,当我使用下面的代码时,会自动添加一个大的边距到<html>元素:

.clearfix:after {   
    visibility: hidden;   
    display: block;   
    content: ".";   
    clear: both;   
    height: 0;
}

最后,我通过添加font-size: 0来解决边缘问题;到上面的CSS。

我只用:-

.clear:after{
  clear: both;
  content: "";
  display: block;
}

工作最好,兼容IE8+:)

如果浮动容器有父元素,在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的方式。