[css]
.clearfix:after { clear: both; visibility: hidden; content: '. '; display: block; height: 0;} /* 加点 与不加点 作用于ie8得区别 */
.clearfix { display: inline-block; }
* html .clearfix { height:1%; } /* 兼容于ie6 或者使用 *zoom: 1; 让ie6自动清除浮动包裹里面的元素 */
[/css]
如上的clearfix是我常用的清除浮动的代码，用过许多次了，感觉没有什么问题；不过前几天突然发现clearfix在ie8下有特别的显示。demo请点击clearfix_ie8，在firefox、chrome、opera、ie7、ie6都是如下的图形
但是在ie8模式下，你会看到明显的格式区别item之间有大约10px的间隙。
我们知道最初浮动的清除采用的是在浮动的子div同级加空div的方式，即<div style="clear:both"></div> 这样既可自动撑开父div，达到清除浮动的效果。
而clearfix原理同样如此，after伪类可以在使用clearfix的容器之后新建一个空的容器，这容器高度为0、visibility不可见，clear单独在一行显示，display为块级元素，content包含一个“.”。
after伪类在ie7以上、firefox、chrome、opera等浏览器都支持，但ie6以及ie6内核的其他浏览器都是不支持这个的。所以让ie6支持可以采用
[css]
* html .clearfix { height:1%; } /* 兼容于ie6 或者使用 *zoom: 1; 让ie6自动清除浮动包裹里面的元素 */
[/css]
不过ie8 clearfix多出10px的原因还没说明。我偶然的实验发现，原来问题就在这个content，
content 属性与 :befor 及 :after 伪元素配合使用，来插入生成内容。
该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。
而ie8的10px多出来的，就是content: '.'; 这个句点所产生的，所以建议不要加上句点，直接采用content: ' ';空格即可，修改后的效果clearfix_ie8_2