在CSS基于浮动的布局中常用的一种技术是将少量CSS属性分配给你知道将包含浮动元素的元素。该技术通常使用名为clearfix的类定义来实现，(通常)实现以下CSS行为:

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

这些组合行为的目的是创建一个容器:在活动元素之后，包含一个单独的'。'标记为隐藏，这将清除所有预先存在的浮动，并有效地重置页面的下一段内容。

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

我尝试了接受的答案，但我仍然有一个问题的内容对齐。添加如下所示的“: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;
}

简单地说，clearfix是一种hack。

这是我们不得不忍受的丑陋事情之一，因为这是确保浮动子元素不会溢出它们的父元素的唯一合理方法。还有其他的布局方案，但浮动在今天的网页设计/开发中太常见了，不能忽视clearfix hack的价值。

我个人倾向于Micro Clearfix解决方案(Nicolas Gallagher)

.container:before,
.container:after {
  content:"";
  display:table;
}
.container:after {
  clear:both;
}
.container {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

参考

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

区别在于内容点被替换为\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}

实现clearfix的另一个(也许是最简单的)选项是使用overflow:hidden;在包含元素上。例如

.parent { 背景:红色; 溢出:隐藏; ｝ .segment-a { 浮:左; ｝ .segment-b { 浮:正确; ｝ < div class = "父" > < div class = "分割一个" > 左浮动 < / div > < div class = "段b”> 浮动对吧 < / div > < / div >

当然，这只能在您不希望内容溢出的情况下使用。