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

最终,演示效果如下: 没有清除浮动 enter image description here 通过观看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: enter image description here 注释:如果你不关心折叠的容器,而关心失去定位的.main元素,那么你可以选择把"cleared"元素放在container的后面。但是如果这样做了,那么你可能同时也对.main进行clear:both的声明。

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

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

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

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

HTML保持不变,不需要添加额外的元素。 demo如下: enter image description here 如你所看到的一样,我们使container扩展到包含整个浮动元素的高度,background colours, borders 都能够成功运用。一切都很好。

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

方法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: enter image description here

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

.clearfix:after{ content:""; display:table; clear:both; } 简单,高效、语义性、易于重用。

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

方法4:未来之星–contain-floats

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

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

它将会实现像clearfixoverflow方法同样的效果,但是只需要简单的一行代码,并且没有我们之前提到的任何缺点。当然,你可以在CSS中创建一个单独的可重用的clearfix类。 现在看起来还没有任何浏览器支持这个值,但是还是很值得留意的。

总结

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

原博客地址:Clearing Floats清除浮动–clearfix的不同方法的使用概述 翻译出自Clearing Floats: An Overview of Different clearfix Methods

评论
发表评论
5年前

@DO1路人乙 被人鼓励的感觉真好,谢谢

5年前

@Amy的花花世界 不要紧啦,我们都是在成长中,当好好去研究之后我们才会豁然开朗这个标签是干嘛用的,所以相互鼓励~~~~(*^__^*) 嘻嘻……

5年前

@前端乱炖 太赞成你的话了,的确理解上面加深了很多

5年前

@Amy的花花世界 很好,翻译文章可以加深对文章的理解,还能增加文字上的造诣。

5年前

@DO1路人乙 谢谢你的鼓励,实话告诉你,这是我第一篇译文,以前自己写博文,档次总是很低,所以才来试着翻译牛人的文章

5年前

很赞的译文。。。加油!

WRITTEN BY
Amy的花花世界
我是一位web前端工程师。我很热爱我的职业,每天都会去关注web的新热点,也会把自己掌握的知识点分享在博客里。有想认识我的人可以经常访问我的博客以及个人网站。
TA的新浪微博
PUBLISHED IN
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 */
}

最终,演示效果如下: 没有清除浮动

通过观看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: enter image description here 注释:如果你不关心折叠的容器,而关心失去定位的.main元素,那么你可以选择把"cleared"元素放在container的后面。但是如果这样做了,那么你可能同时也对.main进行clear:both的声明。

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

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

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

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

HTML保持不变,不需要添加额外的元素。 demo如下: enter image description here 如你所看到的一样,我们使container扩展到包含整个浮动元素的高度,background colours, borders 都能够成功运用。一切都很好。

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

方法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: enter image description here

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

.clearfix:after{ content:""; display:table; clear:both; } 简单,高效、语义性、易于重用。

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

方法4:未来之星–contain-floats

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

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

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

总结

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

原博客地址:Clearing Floats清除浮动–clearfix的不同方法的使用概述 翻译出自Clearing Floats: An Overview of Different clearfix Methods

我的收藏