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

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;}>
赞(3)
未经允许不得转载:大前端 » CSS清除浮动 万能float闭合
分享到: 更多 (0)

评论 21

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

    I wouldn’t normally be so intrigued by content on this topic but the way you wrote this really grabbed my attention. It is very well thought out and interesting informative content. Thank you for sharing!

    Aubrey Groesser1周前 (03-11)回复
  2. #19

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

    浩安7年前 (2011-12-13)回复
  3. #18

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

    seri8年前 (2011-01-19)回复
  4. #17

    用的是下面的方法

    情歌8年前 (2011-01-01)回复
  5. #16

    😳 测试一个

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

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

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

    人真多,来凑热闹!

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

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

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

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

    亚美蝶8年前 (2010-11-29)回复
  10. #11

    哎….得好好学习啦…

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

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

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

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

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

    好好领悟一番我的评论。

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

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

    浩子8年前 (2010-11-25)回复
  15. #6

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

    格子8年前 (2010-11-25)回复
  16. #5

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

    浩子8年前 (2010-11-25)回复
  17. #4

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

    浩子8年前 (2010-11-25)回复
  18. #3

    熟悉又陌生。悟!

    格子8年前 (2010-11-25)回复
  19. #2

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

    CodeCTO8年前 (2010-11-25)回复
  20. #1

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

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

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

立即前往