什么是清除修复？

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

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

显示：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 是一种对抗浮动元素的 zero-height container problem 的方法

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>

在 this article - by Chris Coyer @ CSS-Tricks 中了解它

---

其他答案都是正确的。但我想补充一点，这是人们第一次学习 CSS 并滥用 float 来完成所有布局的时代的遗迹。 float 旨在在长文本旁边执行浮动图像之类的操作，但很多人将其用作主要布局机制。由于它并不是真正的意思，因此您需要像“clearfix”这样的黑客来使其工作。

如今，display: inline-block 是一个可靠的替代方案 (except for IE6 and IE7)，尽管更现代的浏览器正在提供更有用的布局机制，例如 flexbox、网格布局等。

---

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

---

提供 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 { 显示：流根；背景颜色：盖恩斯伯勒； } .item { 边框：1px 纯黑色；向左飘浮; } .item1 { 高度：120px;宽度：120px； } .item2 { 高度：80px;宽度：140px；浮动：对； } .item3 { 高度：160px;宽度：110px； }