我有一个古老的问题,一个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

其他回答

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

一个新的显示值似乎是在一行中的作业。

display: flow-root;

来自W3规范:“元素生成一个块容器盒,并使用流布局布局其内容。它总是为其内容建立一个新的块格式上下文。”

信息: https://www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136

※如图所示、在上面的链接中,支持目前有限的后备支持像使用以下可能: https://github.com/fliptheweb/postcss-flow-root

最新的标准,用于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)。

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

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