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

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

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

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

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

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


当前回答

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

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

其他回答

我总是使用micro-clearfix:

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.cf {
    *zoom: 1;
}

在Cascade框架中,我甚至在块级元素上默认应用它。在我看来,默认情况下将它应用于块级元素,使块级元素的行为比传统行为更直观。它还使我更容易向Cascade Framework(它支持IE6-8和现代浏览器)添加对旧浏览器的支持。

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

我在官方的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

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

你也可以把这个放在你的CSS中:

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

*:first-child+html .cb{zoom: 1} /* for IE7 */

并添加类“cb”到你的父div:

<div id="container" class="cb">

您不需要在原始代码中添加任何其他内容。