【转】关于after伪对象清浮动
【总结】关于after伪对象清浮动
一直用空标签清浮动，看到伪对象可以用来画图，稍稍研究了一下，意外加深了对after伪对象清浮动的理解。
关于对伪对象基础知识的介绍：http://hi.baidu.com/shawn_html5/item/491455fe3e27d678c8f337cd
我们回顾一下，空标签清浮动是这样：
<div style="clear:both;height:0;overflow:hidden;"></div>
height:0;overflow:hidden;是为了使标签不占空间而做的设置，真正起作用的命令其实很简单，就是clear：both；无论用什么方法清浮动，都是为了使这个命令起作用。
after伪对象清浮动也是这样的，只不过after伪对象是在目标元素后创造了一个虚拟元素，然后给这个虚拟的元素设置clear：both。
网上关于after伪对象清浮动的分享很多，但大部分只是收藏别人的代码，至于为什么要这么写，少有人关注。
.a:after{
display:block;
content:"";
height:0;
clear:both;
overflow:hidden;
}
以上其实就是after伪对象清浮动的核心语句了，clear:both;有了。
height:0; overflow:hidden;照例是为了让内容不占地方，不打乱布局。
content:"";内是伪对象的内容，类似我们总习惯在清浮动的空标签内写个空格（貌似不写也没出过什么问题），引号内随意写内容或者不写也行。但这个属性一定要写上，否则清浮动无效！
display:block;是因为after伪对象默认是行内元素的，我们需要把它转成块元素。
通过以上的设置，其实就在现代ie8以后的浏览器中完美实现清浮动了。
还没完，对了，我们还得照顾照顾ie6和ie7，怎么做兼容呢？网上有几种写法：
方法一：
.a{display: inline-table;}
/* Hides from IE-mac \*/
* html .a{height: 1%;}
.a{display: block;}
/* End hide from IE-mac */
方法二：
.a{display:inline-block;}
.a{display:block;}
。。。
看着各种方法纷乱复杂，其实所有方法的本质都是：触发ie的layout！
于是我试着用句最简单的触发layout语句解决这个问题：.a{zoom:1;}，结果是可行的。
于是我得到了兼容的after伪对象清浮动的方法：
.a:after{
display:block;
content:"";
height:0;
clear:both;
overflow:hidden;
}
.a:{zoom:1;}
完整代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>after伪对象清浮动 </title>
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
.a{border:1px red solid;}
.b{height:100px;width:100px;border:1px red solid;float:left;}
.c{height:100px;width:100px;border:1px red solid;float:left;}
.a:after{
display:block;
content:"";
height:0;
clear:both;
overflow:hidden;
}
.a{zoom:1;}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
<div class="b"></div>
<div class="c"></div>
</div>
</body>
</html>
这里需要注意的是，.a必须是一个块元素。若是需要.a是一个行内元素怎么办呢？
如下设置：
.a{display:inline-block;}
.a{*display:inline;}/*用hack做ie6 7的兼容*/
