Clearing Floats清除浮动--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

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

This is the .main element.

通过观看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

This is the .main element.

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

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

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

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

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

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

demo如下：

This is the .main element.

如你所看到的一样,我们使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：

This is the .main element.

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

posted on 2014-10-22 19:15 加油_linda 阅读(526) 评论(0) 编辑收藏举报

刷新页面返回顶部

加油_linda