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

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

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

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

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

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


当前回答

我在官方的CLEARFIX-Method中发现了一个bug: 交通部没有字体大小的规定。 如果你设置height = 0并且DOM-Tree中的第一个元素具有类clearfix,那么页面底部总会有12px的边距:)

你必须像这样修正它:

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

它现在是yaml布局的一部分…看看吧,非常有趣! http://www.yaml.de/en/home.html

其他回答

我最喜欢的方法是在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>

我建议使用下面的,这是从http://html5boilerplate.com/

/* >> The Magnificent CLEARFIX << */
.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

为什么只是试图使用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:after { 
    content: "";
    display: table;  
    clear: both;  
}

最新的标准,用于inunit . CSS和Bourbon -两个非常广泛使用和维护良好的CSS/Sass框架:

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

笔记

请记住,clearfixes本质上是对flexbox布局的一种hack,现在可以以更简单和更智能的方式提供。CSS浮动最初是为内联内容的流动而设计的——就像长文本文章中的图像一样——而不是网格布局之类的。除非你的目标浏览器是老式的(不是Edge) Internet Explorer,否则你的目标浏览器支持flexbox,所以它值得你花时间学习。

这并不支持IE7。你不应该支持IE7。这样做会继续将用户暴露在不固定的安全漏洞中,并使所有其他web开发人员的生活更加困难,因为它减少了用户和组织切换到更安全的现代浏览器的压力。

2012年7月,Thierry Koblentz宣布并解释了这个修正。它从尼古拉斯·加拉格尔2011年的微清理中摆脱了不必要的重量。在这个过程中,它释放了一个伪元素供您自己使用。这已经更新为使用display: block而不是display: table(再次归功于Thierry Koblentz)。