最近，我正在浏览一些网站的代码，发现每个<div>都有一个 class clearfix 。

经过快速的 Google 搜索后，我了解到有时是针对 IE6 的，但实际上是一个 clearfix 吗？

与没有 clearfix 的布局相比，您能否提供一些带有 clearfix 的布局的示例？

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

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

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

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

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

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

这些天display: inline-block是一种可靠的替代方案（ IE6 和 IE7 除外 ），尽管更现代的浏览器以 Flexbox，网格布局等名称提供了更有用的布局机制。

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

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

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}

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

.clearfix {
   display: flow-root;
}

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

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

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

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

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

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

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