css清除浮动的方法

一般我们清除浮动都是在最后一个浮动的DIV最后面加上<div class="clear:both;"></div>，代码如下：

<div style="background:red;border:1px red solid;">
    <div style="float:left;width:100px;background:blue;">第一个浮动</div>
    <div style="float:left;width:200px;background:green;">第二个浮动</div>
    <div style="clear:both;"></div>
</div>

每次在最后加一个空标签来清除浮动是不是觉得麻烦，而且是一个空标签。看到那么多空标签是不是也很别扭？

刚刚在ThinkPHP网站上看到另外一种写法，能有效减少空标签且能正常的清除浮动，并且兼容所有主流浏览器。代码如下：

HTML:

<div class="clear" style="background:red;border:1px red solid;">
    <div style="float:left;width:100px;background:blue;">第一个浮动</div>
    <div style="float:left;width:200px;background:green;">第二个浮动</div>
</div>

CSS:

.clear:before, .clear:after{content:"";display:table;}
.clear:after{clear:both;}
.clear{zoom: 1;} /*针对IE6与IE7*/

上面的CSS中，第一行与第二是针对于 IE8+，火狐，谷歌，Opera浏览器，由于IE6、7不识别 :before , :after css选择器，所以第三行是针对于IE6与IE7。

由此可见，上面css清楚浮动的方法确实减少了页面中的空标签。