首页 > 代码库 > 清除浮动float那点事儿
清除浮动float那点事儿
抛弃那些没用的方法,只记住最实用的一种方法即可!
给要清除浮动的父元素多加一个class属性:clearfix!!!
样式如下:
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
为了兼容ie6,ie7(现在的项目几乎已经完全不考虑)
.clearfix{
zoom:1
}
清除浮动就是这么简单,可以作为公共样式common.css,每个页面都可以直接调用!
简单的实例应用:
<div class="clearfix">
<div style="float:left">
//sth
</div>
<div style="float:right">
//sth
</div>
</div>
为什么要清除浮动:
1.之前写的时候都会发现页面写着写着就发生错乱,而且还有重叠?就是浮动惹的祸!
2.父级元素下面的子元素float时,可能会导致父级height值为0;故在使用了float之后,立即在父级上面加上clearfix,彻底消除float带来的各种怪异问题!
清除浮动float那点事儿
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。