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

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

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

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

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

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


当前回答

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

其他回答

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

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

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

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

使用SASS, clearfix是:

@mixin clearfix {
    &:before, &:after {
        content: '';
        display: table;
    }
    &:after {
        clear: both;
    }
    *zoom: 1;
}

它的用法如下:

.container {
    @include clearfix;
}

如果你想要新的clearfix:

@mixin newclearfix {
    &:after {
        content:"";
        display:table;
        clear:both;
    }
}

我只用:-

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

工作最好,兼容IE8+:)

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