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

其他回答

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

我只用:-

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

工作最好,兼容IE8+:)

与其他clearfix不同,这是一个没有容器的开放式clearfix

其他清除操作要么要求被浮动元素位于标记良好的容器中,要么需要额外的语义上为空的<div>。相反,明确分离内容和标记需要严格的CSS解决方案来解决这个问题。

仅仅因为需要标记浮点数的结尾,就不允许进行无人值守的CSS排版。

如果后者是你的目标,浮点数应该对任何围绕它的东西(段落、有序和无序列表等)保持开放,直到遇到“clearfix”。例如,clearfix可以通过一个新标题来设置。

这就是为什么我使用以下clearfix与新标题:

h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}

这个解决方案在我的网站上被广泛使用,以解决以下问题:浮动的微型对象旁边的文本很短,下一个清除对象的上边距不受尊重。

它还可以防止从站点自动生成pdf时的任何人工干预。 这是一个示例页面。

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

这是一个相当简洁的解决方案:

/* 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/