码迷,mamicode.com
首页 > Web开发 > 详细

CSS清除浮动

时间:2014-05-14 09:02:32      阅读:348      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   c   

1. 空div
bubuko.com,布布扣
1  .clear{height:0;clear:both;overflow:hidden;}
bubuko.com,布布扣
    就是直接一个<div class="clear"></div>(当然标签也可以是br、p,class名称也可以自由定义)当作最后一个子标签放到父标签那儿,此方法屡试不爽,兼容性强,使用方便,是初学时使用的上佳之选。但是同时也看到了巨大的浪费,浪费了一个标签,而且只能使用一次,我个人是无法容忍的,所以这个方法不推荐。而且有时候一不留神中间多了个空格会产生一段空白高度的。
 

2. overflow + zoom方法

bubuko.com,布布扣
1 .box{overflow:hidden; zoom:1;}
bubuko.com,布布扣
     为父标签box添加这两个属性。overflow是针对现在浏览器(包括ie7),而zoom主要是针对ie6设置的,如果父元素box定义width值,那么在ie6中就会自动触发haslayout,也就不需要添加zoom属性了。

    此方法优点在于代码简洁,涵盖所有浏览器,可谓不错的选择啊。不过也是有问题的,就是这个      overflow:hidden;是个小炸弹,要是里面的元素要是想来个margin负值定位或是负的绝对定位,岂不是直接被裁掉了,所以此方法是有不小的局限性的。我一般不用这个方法,只是有时候顺便去除浮动时用用。

 

3. after+ zoom方法

bubuko.com,布布扣
1 .clearfix{zoom:1;}
2 
3 .clearfix:after{display:block; content:‘.‘; clear:both; line-height:0; visibility:hidden;}
bubuko.com,布布扣
    先来简单讲讲after,所谓after,就是指标签的最后一个子元素的后面,他适用于除了ie6/ie7之外的现代浏览器。于是呢,我们可以用CSS代码生成一个具有clear属性的元素,其中的关键样式就是content了。或许您从网上看到的content里面的内容是”.”一个点,我了很多次,貌似随便写什么东西都没有问题,比如content:‘clearboth‘;没问题,或是content:‘佰亿‘也是ok的。这里的line-height:0写成height:0也是可以的。此方法可以说是综合起来最好的方法了,不会影响任何其他样式,通用性强,覆盖面广,值得推荐。

CSS清除浮动,布布扣,bubuko.com

CSS清除浮动

标签:style   blog   class   code   java   c   

原文地址:http://www.cnblogs.com/reeoo/p/3725596.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!