使用SASS, clearfix是:

@mixin clearfix {
    &:before, &:after {
        content: '';
        display: table;
    }
    &:after {
        clear: both;
    }
    *zoom: 1;
}

它的用法如下:

.container {
    @include clearfix;
}

如果你想要新的clearfix:

@mixin newclearfix {
    &:after {
        content:"";
        display:table;
        clear:both;
    }
}

如果浮动容器有父元素，在ie6中使用overflow:hidden/auto和height就足够了。

#测试中的任何一个都可以工作，下面所述的HTML可以清除浮动。

#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

如果这在ie6中不能正常工作，只需要浮动父节点来清除浮动。

#test {
  float: left; // using float to clear float
  width: 99%;
}

从来没有真正需要任何其他类型的清理。也许是我编写HTML的方式。

为什么只是试图使用css hack来做1行HTML做的工作。为什么不使用语义html tu放断点返回行?

Fo me真的更好用:

<br style="clear:both" />

如果你不想在你的html中添加任何样式，你只需要使用class作为你的break 然后输入。clear {clear:both;}。

这样做的好处:

html返回行的语义使用 如果没有CSS加载，它将工作 不需要额外的CSS代码和Hack 不需要用CSS模拟br，它已经存在于HTML中

考虑到我不打算发布的大量回复。然而，这种方法可能会帮助到别人，就像它曾经帮助过我一样。

尽可能远离漂浮物

值得一提的是，我像埃博拉病毒一样避开花车。有很多原因，我并不孤单;阅读Rikudo关于什么是clearfix的回答，你会明白我的意思。用他自己的话来说:……在布局中使用浮动元素越来越不受欢迎，而是使用更好的替代品……

除了浮动，还有其他好的(有时更好的)选择。随着技术的进步和改进，flexbox(和其他方法)将被广泛采用，而浮点数将成为一个糟糕的记忆。也许是CSS4?

---

浮动错误行为和失败的清除

首先，有时候，你可能认为你是安全的，直到你的救生圈被刺穿，你的html流开始下沉:

在下面的代码依赖http://codepen.io/omarjuvera/pen/jEXBya中，使用<div classes ="clear"></div>(或其他元素)清除浮点数的做法很常见，但不受欢迎且反语义。

<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

div {
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

div.floated {
    float: left;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

然而，就在你认为你的花车值得起航的时候，砰!随着屏幕尺寸变得越来越小，你会看到奇怪的行为，如下图所示(同样的http://codepen.io/omarjuvera/pen/jEXBya):

你为什么要关心这个? 大约80%(或更多)的设备都是小屏幕的移动设备。台式电脑/笔记本电脑不再是王者。

---

事情并没有就此结束

这不是浮动的唯一问题。有很多，但在这个例子中，有些人可能会说，你所要做的就是把你的浮动放在一个容器中。但正如您在代码依赖和图形中看到的那样，情况并非如此。这显然让事情变得更糟:

HTML

<div id="container" class="">
  <div class="floated">1st</div>
  <div class="floated">2nd</div>
  <div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

#container {
  min-height: 100px; /* To prevent it from collapsing */
  border: 1px solid #0f0;
}
.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

至于结果呢?

是一样的!

至少你知道，你会开始一个CSS派对，邀请各种选择器和属性的派对;使你的CSS比你开始的时候更混乱。只是为了修理你的花车。

---

CSS Clearfix拯救

这个简单而适应性强的CSS是一个美人和“救世主”:

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

就是这样!它真的可以在不破坏语义的情况下工作，我提到过它可以吗?：

同样的例子……HTML

<div class="clearfix">
    <div class="floated">1st</div>
    <div class="floated">2nd</div>
    <div class="floated">3nd</div>
</div>
<section>Below</section>

CSS

div.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}
section {
        border: 4px solid #00f;
}


.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

---

现在我们不再需要<div classes ="clear"></div> <!——充当一堵墙——>，让语义警察高兴。这还不是唯一的好处。这个clearfix可以响应任何屏幕大小，而不需要使用最简单的@media。换句话说，它将保持你的浮动容器在检查和防止洪水。最后，它提供了对旧浏览器的支持，只需一个小的空手道斩=)

这里又是clearfix

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

这是一个相当简洁的解决方案:

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

它可以在Firefox 3.5+， Safari 4+， Chrome, Opera 9+， IE 6+中运行 包括:before选择器是不需要清除浮点数的， 但它可以防止现代浏览器的页边距崩溃。这 确保在缩放:1时与IE 6/7的视觉一致性 应用。

从http://nicolasgallagher.com/micro-clearfix-hack/

overflow属性可以用来清除没有额外标记的浮点数:

.container { overflow: hidden; }

这适用于所有浏览器，除了IE6，你所需要做的就是启用hasLayout(缩放是我的首选方法):

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html