归档:2014年6月月

[转载]闲聊CSS之关于clearfix--清除浮动

蓝飞 蓝飞 | 时间:2014-06-03, Tue | 7,890 views
前端开发 

一,什么是.clearfix

你只要到Google或者Baidu随便一搜"css清除浮动",就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix"。

.clearfix:after {
    content: " ";
    display: block;
    clear: both;
    height: 0;
}
.clearfix {
    zoom: 1;
}

<div class="clearfix">
    <div class="floated"></div>
</div>

上面的代码就是.clearfix的定义和应用,简单的说下.clearfix的原理:

1、在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动。

2、在标准浏览器下,.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素,从而达到清除浮动的作用。

<div>
    <div class="floated"></div>
</div>
<div style="clear: both"></div>

(阅读全文…)