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

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)

评论 29

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

    we always buy our dog supplies at least once a week from the local pet store. ;;

  2. #27

    It’s rare to get an expert in whom you may have some confidence. In the world of today, nobody actually cares about showing others the way in this matter. How lucky I am to have now found a wonderful web site as this. It is really people like you who make a genuine difference nowadays through the ideas they discuss.

    Eun Duerkson2周前 (05-15)回复
  3. #26

    thank you for sharing with us, I conceive this website truly stands out : D.

    Nonton Anime2周前 (05-10)回复
  4. #25

    This web page doesn’t show up properly on my blackberry – you might want to try and fix that

    cat2周前 (05-08)回复
  5. #24

    I am often to blogging and i genuinely appreciate your content regularly. This article has truly peaks my interest. My goal is to bookmark your website and maintain checking for new details.

    asikqq3周前 (05-03)回复
  6. #23

    I blog often and I truly appreciate your content. This great article has truly peaked my interest. I’m going to bookmark your blog and keep checking for new information about once per week. I subscribed to your RSS feed too.

    DMC51个月前 (04-14)回复
  7. #22

    Very good info. Lucky me I recently found your blog by accident (stumbleupon). I’ve saved it for later!

    Apex Legends Octane2个月前 (03-31)回复
  8. #21

    Throughout times of hormonal modifications the body boosts the rate at which it types moles. These times are a lot more specifically these at which the physique is undergoing a great alter. A lot more particularly this happens during pregnancy, puberty and menopause. They are times once the physique is altering extremely rapidly and this might cause moles of the atypical selection to kind.

    my singing monsters2个月前 (03-28)回复
  9. #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 Groesser3个月前 (03-11)回复
  10. #19

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

    浩安8年前 (2011-12-13)回复
  11. #18

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

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

    用的是下面的方法

    情歌9年前 (2011-01-01)回复
  13. #16

    😳 测试一个

    浩子9年前 (2011-01-01)回复
  14. #15

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

    浩子9年前 (2010-12-01)回复
  15. #14

    人真多,来凑热闹!

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

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

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

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

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

    哎….得好好学习啦…

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

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

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

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

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

    好好领悟一番我的评论。

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

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

    浩子9年前 (2010-11-25)回复
  23. #6

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

    格子9年前 (2010-11-25)回复
  24. #5

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

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

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

    浩子9年前 (2010-11-25)回复
  26. #3

    熟悉又陌生。悟!

    格子9年前 (2010-11-25)回复
  27. #2

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

    CodeCTO9年前 (2010-11-25)回复
  28. #1

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

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

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

立即前往