什么是clearfix?

最近我在浏览一些网站的代码，看到每个<div>都有一个类clearfix。

在快速谷歌搜索后，我了解到它是IE6有时，但实际上什么是一个clearfix?

你能提供一些例子的布局与一个clearfix，比较没有一个布局clearfix?

当前回答

我尝试了接受的答案，但我仍然有一个问题的内容对齐。添加如下所示的“:before”选择器修复了这个问题:

// LESS HELPER
.clearfix()
{
    &:after, &:before{
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
}

上面的LESS将编译为下面的CSS:

clearfix:after,
clearfix:before {
  content: " ";
  /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

2016-01-13 00:56:39

其他回答

这是一个不同的方法，同样的东西，但有点不同

区别在于内容点被替换为\00A0 ==空格

更多信息http://www.jqui.net/tips-tricks/css-clearfix/

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

这是它的精简版……

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}

2012-09-20 09:17:10

clearfix允许容器包装其浮动子容器。如果没有clearfix或等效的样式，容器就不会围绕它的浮动子容器而崩溃，就好像它的浮动子容器是绝对定位的一样。

clearfix有几个版本，Nicolas Gallagher和Thierry Koblentz是主要作者。

如果你想要支持旧的浏览器，最好使用这个clearfix:

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

在SCSS中，你可以使用以下技巧:

%clearfix {
    &:before, &:after {
        content:" ";
        display:table;
    }

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}

如果你不关心是否支持旧的浏览器，有一个更短的版本:

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

2014-04-18 09:35:45

我尝试了接受的答案，但我仍然有一个问题的内容对齐。添加如下所示的“:before”选择器修复了这个问题: