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

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

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

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

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

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


当前回答

我最喜欢的方法是在css / scss文档中创建一个clearfix类,如下所示

.clearfix{
    clear:both;
}

然后在我的html文档中调用它,如下所示

<html>
  <div class="div-number-one">
    Some Content before the clearfix
  </div>

  <!-- Let's say we need to clearfix Here between these two divs --->
  <div class="clearfix"></div>

  <div class="div-number-two">
    Some more content after the clearfix
  </div>
</html>

其他回答

诚实地;所有的解决方案似乎都是修复渲染错误的黑客…我错了吗?

我发现<br clear="all" />是最简单、最简单的。到处看到class="clearfix"并不能触动那些反对无关的markup元素的人的感情,不是吗?你只是把问题画在了另一幅画布上。

我还使用了display: hidden解决方案,这很好,不需要额外的类声明或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/

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

从引导程序Clearfix:

.clearfix {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}

当我们在div元素中使用float属性时,clearfix就可以解决这个问题。如果我们使用两个div元素一个作为float:left;另一个是float:right;我们可以对两个div元素的父元素使用clearfix。如果我们拒绝使用clearfix不必要的空间填充下面的内容和网站结构将被打破。