CSS clearfix 清除浮动

2011-02-2112条评论

在很长一段时间里面，如果一个容器内有浮动元素的话，我习惯在父容器闭合前加一个 clear:both 元素，用于清除浮动，使父容器撑起。如下面得例子：

<style media="all">
.children {float:left;}
.fixed {clear:both;}
</style>
<div class="parent">
    <div class="children">子元素</div>
    <div class="children">子元素</div>
    <div class="children">子元素</div>
    <div class="fixed"></div>
</div>

但是添加一个并没有实质内容的标签并不符合简化页面结构的目的，而且在 JavaScript 操作子元素时很容易引起 bug。

如果要在不增加 fixed 元素的情况下清除 parent 容器内的浮动，我们可以利用 :after 伪类。 :after 伪类在 W3C 里的定义是：在 :after 元素的内容末尾插入 content 的内容，这些内容默认为 inline 级。

在使用 :after 伪类后，完整的清浮动 CSS 为：

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

使用上面的样式后，只需为 parent 元素增加一个 clearfix 的class，即可去掉里面的 fixed 子容器。并且兼容目前几乎所有的 web 浏览器。

分享到： QQ空间新浪微博腾讯微博一键分享更多 5

CSS 相关文章

12则回应给“CSS clearfix 清除浮动”

♦
gsid says:
MARK一下
回复 |2011 年 02 月 21 日 at 12:29 下午
♦
万戈 says:
我还喜欢给.clearfix加一个zoom:1;
回复 |2011 年 02 月 22 日 at 11:23 下午
- ♦
  CantonBolo says:
  加 zoom 属性可以说是多余的，因为在 IE6/7 里要把 clearfix 元素隐藏起来
  回复 |2011 年 02 月 23 日 at 1:03 上午
♦
苏昊 says:
.clearfix:after {
visibility: hidden;
display: block;
content: ” “;
clear: both;
height: 0;
}
.clearfix { zoom:1; }
这样即可
回复 |2011 年 02 月 23 日 at 6:03 下午
- ♦
  seri says:
  过来学习
  回复 |2011 年 03 月 09 日 at 4:55 下午
♦
cgrabbit says:
学习学习！哈哈
回复 |2011 年 03 月 01 日 at 1:37 上午
♦
大余 says:
应该是在 parent 元素增加一个 “clearfix” 的 class 吧？
回复 |2011 年 07 月 18 日 at 1:57 下午
- ♦
  CantonBolo says:
  手误了，已改正，谢谢指出
  回复 |2011 年 07 月 22 日 at 2:52 下午
(转)CSS clearfix | Leo's World says:
[...] See also:http://www.codecto.com/2011/02/css-clearfix-float/ [...]
回复 |2012 年 04 月 05 日 at 5:02 下午
(转)CSS clearfix | Leo's Blog says:
[...] See also:http://www.codecto.com/2011/02/css-clearfix-float/ [...]
回复 |2012 年 04 月 18 日 at 11:12 上午
(转)CSS clearfix - Leo's Blog says:
[...] See also: http://www.codecto.com/2011/02/css-clearfix-float/ [...]
回复 |2012 年 09 月 28 日 at 10:05 上午
♦
Reuel says:
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
.clearfix { display: block; }
/* End hide from IE-mac */
那这样可以吗？
来自 http://www.codecto.com/2011/02/css-clearfix-float/

更简洁的 CSS 清理浮动方式
标签: clearfix, css, 浮动
CSS 相关
清理浮动有很多种方式，像使用 br 标签自带的 clear 属，使用元素的 overflow，使用空标签来设置 clear:both 等等。但考虑到兼容问题和语义化的问题，一般我们都会使用如下代码来清理浮动。

/* 清理浮动 */ .clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } .clearfix { zoom:1; }

其原理是，在「高级」浏览器中使用 :after 伪类在浮动块后面加上一个非 display:none 的不可见块状内容来，并给它设置 clear:both 来清理浮动。在 ie6 和 7 中给浮动块添加 haslayout 来让浮动块撑高并正常影响文档流。
上面的代码应该是现在主流的清理浮动方式。现在支付宝就使用这样的方式。而现在，Nicolas Gallagher 给出了一个更简洁的方案：

.cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } .cf { zoom:1; }

原理还是一样的。使用 :after 伪类来提供浮动块后的 clear:both。不同的是，隐藏这个空白使用的是 display: table。而不是设置 visibility:hidden;height:0;font-size:0; 这样的 hack。
值得注意的是这里中的 :before 伪类。其实他是来用处理 top-margin 边折叠的，跟清理浮动没有多大的关系。但因为浮动会创建 block formatting context，这样浮动元素上的另而一元素上如果刚好有 margin-bottom 而这个浮动元素刚好有margin-top 的话，应该让他们不折叠（虽然这种情况并不常见）。
信息来源：ivane 的 QQ 微博

==========
说在后面的话：好吧。只是简直地说一下原理，都是引用和评论，并没有自己去折腾。然后，好久没更新了。并不是不想更新只是私事公事太多，都没心去写。现在好了，不用催我，更新了…
然后，我现在经常混的是新浪微博：http://weibo.com/isofish
收藏+分享: Del.icio.us / 百度搜藏 / QQ书签 / Google书签 / 更多 »

首页 » CSS 相关 »
28
2011.05.05 10:08 am
愚人码头 (visit): [回复]

很好很强大！
2011.05.05 10:12 am
Alan (visit): [回复]

居然混新浪微博了，腾讯和twitter也见你更新啊
2011.05.05 10:14 am
ZH CEXO (visit): [回复]

这个方法挺不错的，改天我也总结一下清理浮动的方法，不过因为写的都是小项目，所以还是用的空标签来清理浮动……这个习惯我一定改！
话说:before和:after这样的伪元素真的很有用，昨天才看到个例子，今天又看到了
2011.05.05 10:51 am
elaphent (visit): [回复]

额，很好很强大
2011.05.05 11:10 am
suzhouxiandanwcj (visit): [回复]

崇拜搞IT的
2011.05.05 11:22 am
ADD~“(visit): [回复]

一直用空的div设置clear:both;来清除- -…都是小项目..似乎还好.
2011.05.05 11:35 am
余果 (visit): [回复]

很简洁的代码，强大啊
2011.05.05 12:05 pm
joel (visit): [回复]

http://www.tjkdesign.com/lab/clearfix/new-clearfix.html
2011.05.05 12:48 pm
suerry (visit): [回复]

又学习到了。
2011.05.05 3:50 pm
Justice (visit): [回复]

我一般用的都是 overflow:hidden + zoom:1 的组合。当然有些不能 overflow:hidden 的用这个方法不错~
2011.05.05 4:00 pm
IM路人 (visit): [回复]

新方法哟~~~~
2011.05.05 11:44 pm
underone (visit): [回复]

谢谢小鱼的邀请码…
2011.05.06 1:15 pm
wmtimes (visit): [回复]

好方法。
2011.05.06 9:21 pm
安卓汇 (visit): [回复]

没考虑这么复杂的啊。。学习了
2011.05.07 11:13 am
北河 (visit): [回复]

很好很强大，一直是overflow+height:_1%;少量时候用clearfix
2011.05.08 9:03 pm
皇家元林 (visit): [回复]

我感觉好复杂哦
2011.05.13 9:20 am
crossyou (visit): [回复]

过来学习！！
2011.05.19 11:58 pm
Yu (visit): [回复]

有空试试.
2011.06.14 11:01 am
qiubi8801 (visit): [回复]

一直都用 .class{clear:both} 没什么问题
2011.06.19 4:04 pm
芒果 (visit): [回复]

:before 和 :after 不是伪类，是伪元素。
另外 content:” ” 可以写成 content:”20″ 这样visibility:hidden 就不需要了。
2011.06.28 10:59 am
灰鼠 (visit): [回复]

你后面写得这个有问题，如果用UL的话，LI左浮动，在IE8下面，UL会多出左边一块，可以自己测试一下！
2011.06.28 4:27 pm
软件志 (visit): [回复]

不错笔记记下来
2011.07.12 3:04 pm
alswl (visit): [回复]

测了一下，在IE6也通过，真漂亮
2011.07.12 3:52 pm
仰肖 (visit): [回复]

不错，记下
2011.07.19 2:21 pm
rukey67 (visit): [回复]

.hasLayout{clear:both;overflow:hidden;_zoom:1;}
大部分内部有浮动元素的容器都可以多加个这个class，
左右有并排的容器这个可能会有点问题，要去掉clear:both属性，换其他的属性来触发haslayout。不用区分ie6、7或者FF，所有浏览器都适用
2011.07.22 6:48 pm
RAN (visit): [回复]

上述写法在IE中还是有BUG 这是修改后的http://www.newstyleonline.net/post/clear-float-method.html
2011.12.27 9:47 am
vimest (visit): [回复]

用:bofore防止当前元素的margin-top和上一个元素的margin-bottom不折叠，确实是没义吧。
2013.05.27 8:52 am
wldouglas (visit): [回复]

貌似出自《CSS web高级解决方案》
2 条引用通告
<span>标签的使用问题 - 开发者问答
<span>标签的使用问题 - web前端 - 开发者