小虾虎鱼

小虾虎鱼

css清除浮动的方法

作者 禾惠 发表于 2012/12/27,最后修改于 2012/12/27

一般我们清除浮动都是在最后一个浮动的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清楚浮动的方法确实减少了页面中的空标签。