什么是clearfix？

这是一种不同的方法，但有一点不同

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

有关此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}

我尝试了接受的答案，但是内容对齐仍然存在问题。如下所示添加“：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的另一个（也许是最简单的）选项是overflow:hidden;在包含元素上使用。例如

.parent {
  background: red;
  overflow: hidden;
}
.segment-a {
  float: left;
}
.segment-b {
  float: right;
}

<div class="parent">
  <div class="segment-a">
    Float left
  </div>
  <div class="segment-b">
    Float right
  </div>
</div>

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

简而言之，clearfix是一个hack。

这是我们所有人都必须忍受的丑陋事情之一，因为这确实是确保浮动的子元素不会溢出父母的唯一合理方法。还有其他布局方案，但是浮动在当今的Web设计/开发中太普遍了，无法忽略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) */
}

参考

提供有关2017年第二季度情况的最新信息。

Firefox 53，Chrome 58和Opera 45中提供了新的CSS3显示属性。

.clearfix {
   display: flow-root;
}

在此处检查任何浏览器的可用性：http : //caniuse.com/#feat=flow-root

元素（显示属性设置为flow-root）将生成一个块容器框，并使用流布局对内容进行布局。它总是为其内容建立一个新的块格式化上下文。

这意味着，如果您使用包含一个或多个浮动子代的父div，则此属性将确保父代将其所有子代括起来。无需任何clearfix hack。在任何子级上，甚至在最后一个虚拟元素上（如果在最后一个子级上使用带有：before的clearfix变体）。

.container {
  display: flow-root;
  background-color: Gainsboro;
}

.item {
  border: 1px solid Black;
  float: left;
}

.item1 {  
  height: 120px;
  width: 120px;
}

.item2 {  
  height: 80px;
  width: 140px;
  float: right;
}

.item3 {  
  height: 160px;
  width: 110px;
}

<div class="container">
  This container box encloses all of its floating children.
  <div class="item item1">Floating box 1</div>
  <div class="item item2">Floating box 2</div> 
  <div class="item item3">Floating box 3</div>  
</div>

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

如果您通过可视化学习，此图片可能会帮助您了解clearfix的作用。

其他答案是正确的。但我想补充一点，这是人们最初学习CSS并滥用float其所有布局的时代的遗物。float用于在长文本旁边执行浮动图片之类的操作，但是很多人将其用作主要的布局机制。由于它并不是真正的目的，因此您需要使用“ clearfix”之类的hack程序才能使其正常工作。

这些天display: inline-block是一个不错的选择（除了IE6和IE7除外），尽管更现代的浏览器以弹性框，网格布局等名称提供了更有用的布局机制。