什么是清除？

如果不需要支持 IE9 及更低版本，可以自由使用 flexbox，不需要使用浮动布局。

值得注意的是，今天，随着使用更好的替代方案，越来越不鼓励使用浮动元素进行布局。

• display: inline-block-更好
• Flexbox - 最佳（但浏览器支持有限）

Firefox 18、Chrome 21、Opera 12.10 和 Internet Explorer 10、Safari 6.1（包括 Mobile Safari）和 Android 默认浏览器 4.4 支持 Flexbox。

有关详细的浏览器列表，请参阅：https://caniuse.com/flexbox。

（也许一旦它的位置完全建立起来，它可能是绝对推荐的布局元素的方式。

clearfix 是元素自动清除其子元素的一种方式，因此您不需要添加其他标记。它通常用于浮动布局，其中元素被浮动以水平堆叠。

clearfix 是一种解决浮动元素的零高度容器问题的方法

清除修复按如下方式执行：

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

或者，如果您不需要 IE<8 支持，以下操作也可以：

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

通常，您需要执行以下操作：

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

使用 clearfix，您只需要以下内容：

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>

在这篇文章中阅读它 - 作者：Chris Coyer @ CSS-Tricks

其他答案是正确的。但我想补充一点，它是人们第一次学习 CSS 时的遗物，并被滥用来做他们所有的布局。 旨在在长文本旁边做浮动图像之类的事情，但很多人将其用作主要布局机制。由于它并不是真正用于此目的，因此您需要像“clearfix”这样的技巧才能使其工作。floatfloat

如今，它是一个可靠的选择（IE6 和 IE7 除外），尽管更现代的浏览器在 flexbox、grid layout 等名称下提供了更有用的布局机制。display: inline-block

在基于 CSS 浮点的布局中常用的一种技术是将一些 CSS 属性分配给您知道将包含浮动元素的元素。该技术通常使用称为 的类定义实现，（通常）实现以下 CSS 行为：clearfix

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

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

这是一个不同的方法，同样的事情，但有点不同

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

允许容器包装其浮动的子项。如果没有样式或等效样式，容器不会环绕其浮动的子项并折叠，就像其浮动子项被绝对定位一样。clearfixclearfix

该清除程序有几个版本，尼古拉斯·加拉格尔（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是一个黑客。

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

参考

实现 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>

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

我尝试了公认的答案，但我在内容对齐方面仍然有问题。添加“：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;
}

提供2017年第二季度的最新情况。

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

.clearfix {
   display: flow-root;
}

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

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

这意味着，如果您使用包含一个或多个浮动子级的父级 div，则此属性将确保父级包含其所有子级。无需任何明确的修复黑客。在任何子元素上，甚至最后一个虚拟元素（如果您在最后一个子元素上使用带有 ：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？

元素自动清除其子元素而无需任何其他标记的方法。

使用属性：CSS clearfix 用于修复所需元素的溢出元素。这可以与 3 个属性一起使用：

• Overflow 属性
• Height 属性
• Float 属性

这 3 个 CSS 属性都用于修复溢出元素。

为什么选择 ClearFix？

• 为了避免添加不必要的标记，元素可以使用 clearfix 自动清除或修复其元素。
• 它用于浮动布局，其中元素被浮动以形成水平堆栈。

何时 Clearfix？

• 当两个或多个漂浮物并排放置时。

以这种方式放置项目时，父容器的高度为 0，这很容易弄乱布局。这个问题在浏览器之间不一致，这使得事情变得更加困难。为了解决所有这些问题，创建了 clearfix。

喜欢这个：

示例（供您理解）：

<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix {
  overflow: auto;
}
</style>
</head>

<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With Clearfix</h2>
<p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>

以上代码输出：

Clearfix 会变得过时吗？

在它首次提出近 15 年后，随着 2007 年和 2013 年的更新，今天 clearfix 正在失去相关性，因为今天 CSS Grid 和 Flexbox 正在填补 Web 上高级布局的空白。

希望它有所帮助。