CSS clearfix 清除浮动
在很长一段时间里面，如果一个容器内有浮动元素的话，我习惯在父容器闭合前加一个 clear:both 元素，用于清除浮动，使父容器撑起。如下面得例子：
1 2 3 4 5 6 7 8 9 10 | <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 为：
1 2 3 4 5 6 7 8 9 10 11 | .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 浏览器。
MARK一下
我还喜欢给.clearfix加一个zoom:1;
加 zoom 属性可以说是多余的，因为在 IE6/7 里要把 clearfix 元素隐藏起来
.clearfix:after {
visibility: hidden;
display: block;
content: ” “;
clear: both;
height: 0;
}
.clearfix { zoom:1; }
这样即可
过来学习
学习学习！ 哈哈
应该是在 parent 元素增加一个 “clearfix” 的 class 吧？
手误了，已改正，谢谢指出
[...] See also:http://www.codecto.com/2011/02/css-clearfix-float/ [...]
[...] See also:http://www.codecto.com/2011/02/css-clearfix-float/ [...]
[...] See also: http://www.codecto.com/2011/02/css-clearfix-float/ [...]
.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, 浮动
清理浮动有很多种方式，像使用 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
28
很好很强大！
居然混新浪微博了，腾讯和twitter也见你更新啊
这个方法挺不错的，改天我也总结一下清理浮动的方法，不过因为写的都是小项目，所以还是用的空标签来清理浮动……这个习惯我一定改！
话说:before和:after这样的伪元素真的很有用，昨天才看到个例子，今天又看到了
额，很好很强大
崇拜搞IT的
一直用空的div设置clear:both;来清除- -…都是小项目..似乎还好.
很简洁的代码，强大啊
http://www.tjkdesign.com/lab/clearfix/new-clearfix.html
又学习到了。
我一般用的都是 overflow:hidden + zoom:1 的组合。当然有些不能 overflow:hidden 的用这个方法不错~
新方法哟~~~~
谢谢小鱼的邀请码…
好方法。
没考虑这么复杂的啊。。学习了
很好很强大，一直是overflow+height:_1%;少量时候用clearfix
我感觉好复杂哦
过来学习！！
有空试试.
一直都用 .class{clear:both} 没什么问题
:before 和 :after 不是伪类，是伪元素。
另外 content:” ” 可以写成 content:”20″ 这样visibility:hidden 就不需要了。
你后面写得这个有问题，如果用UL的话，LI左浮动，在IE8下面，UL会多出左边一块，可以自己测试一下！
不错 笔记记下来
测了一下，在IE6也通过，真漂亮
不错，记下
.hasLayout{clear:both;overflow:hidden;_zoom:1;}
大部分内部有浮动元素的容器都可以多加个这个class，
左右有并排的容器这个可能会有点问题，要去掉clear:both属性，换其他的属性来触发haslayout。不用区分ie6、7或者FF，所有浏览器都适用
上述写法在IE中还是有BUG 这是修改后的http://www.newstyleonline.net/post/clear-float-method.html
用:bofore防止当前元素的margin-top和上一个元素的margin-bottom不折叠，确实是没义吧。
貌似出自《CSS web高级解决方案》
2 条引用通告