关注前端开发
关注用户体验

CSS清除浮动 万能float闭合

清除浮动,新手朋友往往不是很明白。如果不清除浮动对float进行闭合,在FF中往往会出错,在大前端有大量的文章进行过介绍。今天向大家推荐一个实例,非常简洁易用。

给需要闭合的DIV(class为clearfix)加上如下的CSS样式即可:

.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
.clearfix{display:inline-block;}
.clearfix {display:block;}
不过貌似这样有点麻烦,呵呵,大前端常用的是下面的:
.clear{clear:both;height:0px;overflow:hidden;}>
未经允许不得转载:大前端 » CSS清除浮动 万能float闭合
分享到:更多 ()

评论 20

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #19

    我用的是clearfix,据说不影响页面结构。

    浩安6年前 (2011-12-13)回复
  2. #18

    我也是常用第二种。但是第一种也要用。第一种不仅仅是清浮动。 😐

    seri6年前 (2011-01-19)回复
  3. #17

    用的是下面的方法

    情歌6年前 (2011-01-01)回复
  4. #16

    😳 测试一个

    浩子6年前 (2011-01-01)回复
  5. #15

    @荣成之窗:欢迎凑热闹,o(∩_∩)o

    浩子7年前 (2010-12-01)回复
  6. #14

    人真多,来凑热闹!

    荣成之窗7年前 (2010-12-01)回复
  7. #13

    @亚美蝶:之前自己的电脑也发生过类似的问题,G了一下,原因大概是你电脑里的Microsoft yahei字体不是“正版”的,呵呵,还有一种可能就是机器里没这个字体
    谢谢提醒和关注!

    浩子7年前 (2010-11-29)回复
  8. #12

    贵博客的雅黑字体在chrome和火狐下怎么表现那么差呢
    建议确认一下这个问题

    亚美蝶7年前 (2010-11-29)回复
  9. #11

    哎….得好好学习啦…

    4.127年前 (2010-11-26)回复
  10. #10

    .clearfix:after{ content:””; height:0; visibility:hidden; display:block; clear:both;}
    .clearfix{ zoom:1;}
    .clear { clear:both }
    我都用这种,如果用overflow掉,会遇到问题吧。比如弹层啥的,超过整个容易就会被截断

    情封7年前 (2010-11-25)回复
  11. #9

    我也是经常用下面的那种闭合方法

    web前端寒风7年前 (2010-11-25)回复
  12. #8

    好好领悟一番我的评论。

    格子7年前 (2010-11-25)回复
  13. #7

    @格子:厉害,什么时候分享一篇好文章啊

    浩子7年前 (2010-11-25)回复
  14. #6

    @浩子:哼,我就掐着时间的

    格子7年前 (2010-11-25)回复
  15. #5

    @格子:差一分钟啊,你这么快,哈哈

    浩子7年前 (2010-11-25)回复
  16. #4

    @CodeCTO:确实,这是CSS新手的通病,以为hack能解决一切,其实不然@4.12:

    浩子7年前 (2010-11-25)回复
  17. #3

    熟悉又陌生。悟!

    格子7年前 (2010-11-25)回复
  18. #2

    为了页面结构的简洁而写大量的CSS Hack,不划算

    CodeCTO7年前 (2010-11-25)回复
  19. #1

    浩哥有点迷糊….这种应用主要是用在什么地方?前端CSS还是新手….这种应用是不是经常在有一个DIV float:left; 然后下一个DIV要在其下方显示并且也是float:left;然后在这两个DIV之间加上这段样式?

    4.127年前 (2010-11-25)回复

themebetter 国内更好的WordPress主题服务商

立即前往