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

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

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

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

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

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


当前回答

为什么只是试图使用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中

其他回答

从引导程序Clearfix:

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

我总是浮动网格的主要部分,并应用clear:两者;到页脚。这并不需要额外的div或类。

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

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

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

#内容{浮动:左;} #栏{浮动:左;} .clear{明确:;显示:块;高度:0 px;宽度:0 px;溢出:隐藏;} < div id = "容器" > <div id="content">text 1 </div> . <div id="sidebar">text 2</div> . < div class = "清晰" > < / div > < / div >

我总是使用micro-clearfix:

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.cf {
    *zoom: 1;
}

在Cascade框架中,我甚至在块级元素上默认应用它。在我看来,默认情况下将它应用于块级元素,使块级元素的行为比传统行为更直观。它还使我更容易向Cascade Framework(它支持IE6-8和现代浏览器)添加对旧浏览器的支持。