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

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

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

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

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

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


当前回答

使用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();
}

其他回答

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

这是一个相当简洁的解决方案:

/* 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/

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

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

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

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

.clearFix:after { 
    content: "";
    display: table;  
    clear: both;  
}