ClearingFloats清除浮动clearfix的不同方法的使用概述

   清除浮动早已是一个前端开发人员必学的一课。毫无疑问，多年来，我们已经接触过多种清除浮动的方法，现在“clearfix methods”越来越被大家熟知。在深入剖析“clearfix”的多种用法之前，我们来先看看clearfix方法试图解决哪些问题。

　　场景:  .el-1 和.el-2是并排浮动在.container元素里，同时.main元素是紧挨着.container

　　预期效果： 我们想要.container的高度扩展到它的子元素的高度（例如:.el-1或者.el-2的高度），同时我们也希望.main是在.container的下面的。

　　实际效果： .container折叠了，并且没有高度。就像它没有包含内容，.main没有在预期的位置，同时在.container的背景和边框也没有了。

 　　基于上述的场景，页面代码可能如下所示：

<div class="container">
  <div class="el-1">A long string of stuff here...div>
  <div class="el-2">A short string of stuff here...div>
div>
<div class="main">
  Some stuff here...
div>

　　CSS代码可能如下所示：

.el-1, .el-2 {
  float: left;
  width: 50%;
}

.el-1 {
  /* styles for .el-1 here */
}

.el-2 {
  /* styles for .el-2 here */
}

.container{
  background:#ccc;
  border:1px solid #000;
}
.main {
  /* styles for .main here */
}

最终，演示效果如下：

Result

通过观看demo，检查.container的CSS样式，可以看到它的确是折叠了。你可以在container的最上面看到一条黑色边框，并且看不到背景颜色。所以container的容器没有包含.el-1.el-2，所以.main移到一个尴尬的地方。

可能跟你想的相反，这不是浏览器的一个bug，也不是floats的错误的使用。floats就是这么工作的很多时候结果不像我们工程师预期想的那样，这时候我们就简单地需要“清除浮动”。

Clearing floats(clearfixing) 主要是指强制使容器元素去包含它的子元素。因此，它强制使随后的元素显示在它下面。经过多年，现在已经有很多方法用来清除浮动。在我们学习这些方法之前，让我们先来看看CSS的clear属性。clear是CSS重要属性之一，我们可以使用它来帮组我们解决这个问题。

The "clear" Property

MDN 是这样定义clear

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down(cleared) below them

从clear的定义上，我们可以明白为什么clear属性能够清楚的清除浮动。现在让我们深入挖掘一些方法吧。

方法1：课堂上的方法

这种方法是一种老的方法。老方法是相对的，当然真正的老方法是使用表格布局（在这种情况下清除浮动是毫无意义的）。考虑到这点，老方法是需要使用到floats的。

思路很简单:在包含浮动的容器的底部插入一个带有clear属性的空元素。使用一个指定的类来实现这样就可以在HTML中重用它了。这是长期使用的一种经典方法。下面是它的CSS样式：

.clear {
  clear: both;
}

HTML结构可能长这样：

<div class="container">
  <div class="el-1">I‘m floated...div>
  <div class="el-2">I‘m also floated...div>
  <br class="clear">
div>
 
<div class="main">
  Bravo, sirs and madams. I‘m in the clear.
div>

下面是使用这个方法实现的demo

注释：如果你不关心折叠的容器，而关心失去定位的.main元素，那么你可以选择把"cleared"元素放在container的后面。但是如果这样做了，那么你可能同时也对.main进行clear:both的声明。

这种方法是很久之前经常使用的方法，他很管用也很简单。然而,现在希望把内容从样式风格中分离出来，并且使用保持语义。这种方法现在已经不被推荐了。

方法2：溢出(overflow)的方法

对.container定义overflow属性，我们将会使container扩展到包含整个浮动元素的高度。CSS如下：

.container {
  overflow: hidden; /* can also be "auto" */
}

HTML保持不变，不需要添加额外的元素。

demo如下：

如你所看到的一样,我们使container扩展到包含整个浮动元素的高度,background colours, borders 都能够成功运用。一切都很好。

然而这个方法的一个主要缺点是子元素如果超过容器将会被隐藏(overflow为hidden)或者产生一个滚动条（overflow为auto）。比之前的方法要好，但是仍不理想。让我们继续研究吧。

方法3：“clearfix”类

你可能经常听到它，但是它是什么?所有追求酷的人都在使用它，同时你也想使用它。“clearfix”（意思是修复浮动的清除）在样式表中定义了一个.clearfix类，我们可以把它应用到任何包含浮动的元素上。它会迫使容器元素扩大，同时使后续元素在容器元素下面。那么它是怎么工作的？它使用了CSS的伪元素：::before和::after.Nicolas Gallagher非常完美的描述它：

The ... generates pseudo-elements and sets their display to table. This creates an anonymous table-cell ... The :after pseudo-element is used to clear the floats. As a result ... the total amount of code needed is reduced.

CSS如下：

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

HTML需要稍微修改下，修改如下：

<div class="container clearfix">
  <div class="el-1">I‘m floated...div>
  <div class="el-2">I‘m also floated...div>
div>
 
<div class="main">
  Bravo, sirs and madams. I‘m in the clear.
div>

下面是添加clearfix的demo：

Chris Coyier曾建议过如果你不需要执行IE8一下的版本，你只需要这样修改：

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

简单，高效、语义性、易于重用。

注释：上面的代码称为“micro clearfix”，Nicolas Gallagher极力推广它。不同点在于Nicolas用的是不同的类。和之前的方法相比较，Peter-Paul Koch和Thierry Koblentz他们都具有类似的技术.基本上，clearfix拥有相当长的历史，我们用的以上方法都是不同的迭代。

方法4：未来之星--contain-floats

有趣的是，W3C规范已经为min-height属性(和min/max属性)添加了一个新的值,为了帮助解决这个问题。如下所示：

.container {
  min-height: contain-floats;
}

    它将会实现像clearfix或overflow方法同样的效果，但是只需要简单的一行代码，并且没有我们之前提到的任何缺点。当然，你可以在CSS中创建一个单独的可重用的clearfix类。

   现在看起来还没有任何浏览器支持这个值，但是还是很值得留意的。

总结

对，就是你，伙计，一个快速完成"clearfix"的方法。.clearfix已经成为标准，我强烈推荐这种方法而不要用前两种方法。它会使生活变得easier.当然，最适合你的就是最奏效的，但是，正如前面提到的，我建议现在就不要使用方法1，坚持使用标准的clearfix

翻译出自Clearing Floats: An Overview of Different clearfix Methods

Clearing Floats清除浮动--clearfix的不同方法的使用概述