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

解读浮动闭合最佳方案:clearfix

之前给大家介绍两种浮动闭合的办法CSS清除浮动 万能float闭合,得知很多同学都在使用下面的骨灰级解决办法:

.clear{clear:both;height:0;overflow:hidden;}

上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题。

但是这种方法的最大缺陷就是改变了html结构,虽然只是加个div。

最优浮动闭合方案(这是我们推荐的):

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}

用法很简单,在浮动元素的父云素上添加class=”demo clearfix”。

你会发现这个办法也有个弊端,但的确是小问题。改变css写法就ok了:

.demo:after,.demo2:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.demo,.demo2{*+height:1%;}

以上写法就避免了改变html结构,直接用css解决了。

很拉轰的浮动闭合办法:

.clearfix{overflow:auto;_height:1%}

这种办法是我看国外的一篇文章得到的方案,测试了,百试不爽,真的很简单,很给力。喜欢的同学也可以试试这个办法。

这种方法是端友radom提供的,测试通过:

.clearfix{overflow:hidden;_zoom:1;}

感谢radom提供的这种方法!!

赞(75)
未经允许不得转载:大前端 » 解读浮动闭合最佳方案:clearfix
分享到: 更多 (0)

评论 89

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

    Use this awesome online toon blast cheats tool to get unlimited free resources in the game

  2. #68

    I have known this website for long time, still think it don’t have any active members like you. Thank you for your post.

    Sockshare1周前 (05-17)回复
  3. #67

    I were caught in same trouble too, your solution really good and fast than mine. Thank you.

    123Movies1周前 (05-17)回复
  4. #66

    An interesting discussion, not difficult to understand when so many people care about it, hoping to have many good ideas about it.

    Fmovies1周前 (05-17)回复
  5. #65

    I saw your post awhile back and saved it to my computer. Only recently have I got a chance to checking it and have to tell you nice work.

    Madaline Right2周前 (05-15)回复
  6. #64

    Sweet blog! I found it while browsing on Yahoo News. Do you have any tips on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Many thanks

    Nonton Anime2周前 (05-11)回复
  7. #63

    Aw, this is an extremely good post. In concept I have to put in writing similar to this moreover – spending time and actual effort to manufacture a great article… but so what can I say… I procrastinate alot and also no indicates manage to get something completed.

    cat products2周前 (05-08)回复
  8. #62

    Hey, you used to write wonderful, but the last few posts have been kinda boring¡K I miss your super writings. Past several posts are just a little bit out of track! come on!

    cat care2周前 (05-08)回复
  9. #61

    I seriously love your website.. Excellent colors & theme. Did you build this web site yourself? Please reply back as I’m planning to create my very own site and want to learn where you got this from or exactly what the theme is called. Thank you!

    DMC53周前 (05-07)回复
  10. #60

    Very nice post. I just stumbled upon your blog and wanted to say that I’ve truly enjoyed surfing around your blog posts. After all I will be subscribing to your feed and I hope you write again very soon!

    agen poker3周前 (05-05)回复
  11. #59

    It is the easiest element in the world, but overall the notion is quite sound.

    asikqq3周前 (05-03)回复
  12. #58

    This is a great tip especially to those fresh to the blogosphere.
    Short but very accurate information… Many thanks for sharing this one.
    A must read post!

  13. #57

    You have remarked very interesting points ! ps nice internet site . “I’m going to a special place when I die, but I want to make sure my life is special while I’m here.” by Payne Stewart.

    togel singapore4周前 (04-28)回复
  14. #56

    I was examining some of your blog posts on this website and I think this internet site is real instructive! Keep posting .

    togel hongkong4周前 (04-28)回复
  15. #55

    Hi, I do believe this is a great blog. I stumbledupon it 😉 I may come back once again since i have bookmarked it. Money and freedom is the best way to change, may you be rich and continue to guide other people.

    Apex Legends Season 11个月前 (04-25)回复
  16. #54

    I blog frequently and I really appreciate your information. This great article has really peaked my interest. I am going to bookmark your site and keep checking for new details about once per week. I opted in for your RSS feed as well.

    DMC51个月前 (04-20)回复
  17. #53

    Looks realy great! Thanks for the post.

    Couperose1个月前 (04-19)回复
  18. #52

    Looks realy great! Thanks for the post.

    Huidverjonging1个月前 (04-18)回复
  19. #51

    Thanks for this nice post. …

    Huidverbetering1个月前 (04-18)回复
  20. #50

    Keep up the good work! Thanks.

    Droge huid1个月前 (04-18)回复
  21. #49

    Enjoyed the post.

    schoonheidsspecialist1个月前 (04-17)回复
  22. #48

    Looks realy great! Thanks for the post.

    Ontstekingen1个月前 (04-17)回复
  23. #47

    Nice post! Thank you.

    Huidverjonging1个月前 (04-17)回复
  24. #46

    Thanks for this nice post. …

    Jeugdpuistjes1个月前 (04-17)回复
  25. #45

    Thanks for this nice post. …

    Magnesium drijven1个月前 (04-16)回复
  26. #44

    Keep up the good work! Thanks.

    schoonheidssalon1个月前 (04-15)回复
  27. #43

    Nice post! Thank you.

    Acne behandeling1个月前 (04-15)回复
  28. #42

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    Huid verbetering1个月前 (04-15)回复
  29. #41

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    boekhouder1个月前 (04-12)回复
  30. #40

    Enjoyed the post.

    boekhouding zzp1个月前 (04-11)回复
  31. #39

    anybody know a diff website where i can watch the finale cuz its not working for me on this one

    Liza Mcgarrity2个月前 (04-08)回复
  32. #38

    Aw, this was a very nice post. Spending some time and actual effort to generate a great article… but what can I say… I put things off a whole lot and never manage to get anything done.

    Apex Legends Octane2个月前 (04-06)回复
  33. #37

    This is actually a good affecting approach to this specific point. Thanks, I’m really happy you shared your thoughts in addition to techniques and I find that i am in agreement. I certainly appreciate your very clear writing additionally , the effort you’ve spent with this posting. A great many thanks for that great work also very good luck with your internet site, I’m awaiting new subjects within the future.

    my singing monsters2个月前 (03-28)回复
  34. #36

    Howdy! Do you know if they make any plugins to safeguard against hackers? I’m kinda paranoid about losing everything I’ve worked hard on. Any recommendations?

    my singing monsters2个月前 (03-28)回复
  35. #35

    Almost all I can say is, I’m not sure what to express! Except certainly, for the great tips which have been shared within this blog. I’ll think of a million fun approaches to read the articles or blog posts on this site. I’m sure I will finally take a step employing your tips on those things I could not have been able to address alone. You are so innovative to let me be one of those to profit from your valuable information. Please know how much I enjoy the whole thing.

    Ashton Phommaseng3个月前 (03-11)回复
  36. #34

    Hello there, I found your site via Google while looking for a related topic, your website came up, it looks great. I have bookmarked it in my google bookmarks.

    Grover Dalitz3个月前 (03-11)回复
  37. #33

    我看看啊

    uu2年前 (2017-08-19)回复
  38. #32

    fenghuangptgw.com fenghuangylgw.com fenghuangylpt.com fenghuangcpt.com fenghuangylzd.com fenghuangurl.com fenghuangcom.com fenghuang999.com fenghuang111.com vipfenghuang.com

    57282年前 (2017-08-08)回复
  39. #31

    艳照门图片,日本片直接访问 lanvbo.com/xinggan/index.html

    123212年前 (2017-07-19)回复
  40. #30

    辣女啵 wwwlanvbocom

    112年前 (2017-07-11)回复
  41. #29

    最后的在IE7已经是不行的,或者IE6某些情况下···

    海农5年前 (2014-01-26)回复
    • 应该~~~最后的在IE7应该是不行的,或者IE6某些情况下···

      海农5年前 (2014-01-26)回复
  42. #28

    还是用伪元素:after来解决好,如果用overflow:hidden/auto,对后期维护会有影响的。

    candoudou6年前 (2013-10-12)回复
  43. #27

    .clearfix{overflow:auto;_height:1%} 这个清浮动 我做项目时 IE6有问题。

    gsl0036年前 (2013-03-30)回复
  44. #26

    .clearfix{overflow:auto;_height:1%} 在我作品中 IE6中失效了······

    gsl0036年前 (2013-03-25)回复
  45. #25

    其实不存在所谓的最佳说法,适合自己的才是最好的,不太同意使用height:%1来触发IE6-7 hasLayout,使用*zoom:1更加保险,不要为了通过验证而验证,更多请阅读:那些年我们一起清除过的浮动 http://www.iyunlu.com/view/css-xhtml/55.html

    把简单做到极致7年前 (2012-05-12)回复
  46. #24

    使用overflow会照成的“点击最外层的轻浮动框会遭成最外层至最内层内容全选(FF);或者在mouseover造成宽度改变时会出现最外层模块有滚动条(IE)”~~看彪叔的blog知道的。不适合嵌套哦

    journey8年前 (2011-11-12)回复
    • 有滚动条是真的,不过一般的用法够了哈

      浩子8年前 (2011-11-12)回复
  47. #23

    .clearfix{overflow:auto;zoom:1} 这个也行的

    江南8年前 (2011-11-09)回复
  48. #22

    嘿嘿,一直使用的是这种方法,比较万能,特别是有背景颜色的时候,可以自由闭合 对UL用的比较多。.clearfix{overflow:hidden;_zoom:1;}

    江南8年前 (2011-11-07)回复
  49. #21

    并不推荐使用clearfix这样一个单独的类名。清楚浮动还是具体问题具体分析比较好。
    这种方式在前期写页面的时候是需要增加,不过后期如果页面版块调整了,不需要这个清楚浮动,那么就有点多余了。(当然,我的设想是不去修改HTML结构。)

    linxz8年前 (2011-11-07)回复
  50. #20

    刚想总结哈,发现这边都有了 😳

    小波8年前 (2011-10-25)回复
  51. #19

    这种方法在ie7下是有问题的。(浏览器模式ie7,文档模式ie7)会发现最后一排蓝色div的margin-botton 无效。
    你有解决办法给我留言http://www.itfe.org/?p=304
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>Admin Header</title>
    <style type=”text/css”>
    .clearfix:after {content: “.”;display: block;height: 0;clear: both;visibility: hidden;}
    * html .clearfix {height: 1%}
    </style>
    </head>
    <body>
    <div style=”border:2px solid red;width:276px;” class=”clearfix”>
    <div style=”float:left;width:80px;height:80px;border:1px solid blue;margin:5px”>TEST DIV</div>
    <div style=”float:left;width:80px;height:80px;border:1px solid blue;margin:5px”>TEST DIV</div>
    <div style=”float:left;width:80px;height:80px;border:1px solid blue;margin:5px”>TEST DIV</div>
    <div style=”float:left;width:80px;height:80px;border:1px solid blue;margin:5px”>TEST DIV</div>
    <div style=”float:left;width:80px;height:80px;border:1px solid blue;margin:5px”>TEST DIV</div>
    <div style=”float:left;width:80px;height:80px;border:1px solid blue;margin:5px”>TEST DIV</div>
    </div>
    </body>
    </html>

    victoriness8年前 (2011-10-11)回复
  52. #18

    给你一个更拉轰的方法
    .clr:after { content:””;display:table;clear:both;}

    .clr{zoom:1;}

    kpbiao8年前 (2011-09-26)回复
  53. #17

    zoom也OK… 😎

    莱斐8年前 (2011-09-23)回复
  54. #16

    大部分css书籍都介绍了这种方法,但在ie下我通常就用zoom :mrgreen:

    呗一个8年前 (2011-09-07)回复
  55. #15

    :mrgreen: :mrgreen: 之前都是简单粗暴的加个DIV

    柒柒8年前 (2011-09-07)回复
  56. #14

    拉轰?这个词好像是出现的北方的吧。

    wmtimes8年前 (2011-09-07)回复
    • Advantageously, the article is actually the greatest topic on curing acne naturally. I concur with your conclusions and will eagerly look forward to your coming updates. Saying thanks will not just be enough, for the phenomenal lucidity in your writing. I will immediately grab your rss feed to stay informed of any updates.

      Billie Suero3个月前 (03-11)回复
    • thank you for sharing – Gulvafslibning | Kurt Gulvmand with us, I believe – Gulvafslibning | Kurt Gulvmand genuinely stands out : D.

      my singing monsters2个月前 (03-28)回复
    • We stumbled over here by a different web page and thought I should check things out. I like what I see so now i’m following you. Look forward to looking over your web page yet again.

      cat care2周前 (05-09)回复
    • I appreciate, cause I found exactly what I was looking for. You’ve ended my four day long hunt! God Bless you man. Have a nice day. Bye

      Nonton Anime2周前 (05-10)回复
  57. #13

    不错,支持下~~这个慢慢研究

    星尔8年前 (2011-09-06)回复
  58. #12

    最近在写个版子,研究国外的,看到有用:after 这个方法的,今儿又温习了下, 😀

    阿健8年前 (2011-09-03)回复
  59. #11

    我发现,这个.clearfix{overflow:auto;_height:1%} 方法不太合理,,使用了之后,凡事超过宽度和高度的,都会有滚动条。。

    王宁8年前 (2011-08-27)回复
  60. #10

    清除浮动, 好多时候用clear:both;单纯的搞一搞- -.
    下午看一篇文章的时候有说到, 在IE的developer tools里头, 触发了haslayout的元素会显示出来haslayout值为”-1″, 但是没找到奥. 有晓得的不?

    ADD~``8年前 (2011-06-15)回复
  61. #9

    zoom: 1; /* IE6下触发hasLayout */

    咖啡凉了8年前 (2011-06-06)回复
  62. #8

    🙄 一下子多了那么多的解决方案~给力啊给力!!

    那些事儿8年前 (2011-06-02)回复
  63. #7

    感谢浩子提供方法,以前只知道三种,现在知道四种了。

    Jayuh8年前 (2011-05-20)回复
    • 哈哈,推荐after的那个

      浩子8年前 (2011-05-20)回复
  64. #6

    这个很老很老很老了吧。。。。

    leafiy8年前 (2011-05-19)回复
    • 那你知道张飞脸上有颗痣吗?这个更老

      浩子8年前 (2011-05-19)回复
      • Well, I do not know if that is going to work for me, however definitely proved helpful for you! Excellent post!

        Sang Doliveira3个月前 (03-11)回复
      • An interesting discussion is definitely worth comment. There’s no doubt that that you should write more about this subject, it might not be a taboo matter but generally people do not discuss such issues. To the next! Many thanks!!

        DMC52个月前 (03-31)回复
  65. #5

    💡 ,深夜来访,哈哈

    神秘唯一8年前 (2011-05-17)回复
  66. #4

    .clearfix{clear:both;height:1%;display:table;display:inline-block;} 推荐
    .clearall{overflow:hidden;_zoom:1;}

    radom8年前 (2011-05-17)回复
    • .clearall{overflow:hidden;_zoom:1;}方法不错,收了!!

      浩子8年前 (2011-05-17)回复
      • 浩哥我试 .clearfix{overflow:auto;_height:1%}

        ie6不行啊 😕

        小波8年前 (2011-11-12)回复
    • radom….下面clearall的 _zoom:1;干嘛用?直接overflow:hidden后ie6是撑开的啊。没搞明白

      小波8年前 (2011-11-12)回复
  67. #3

    .demo,.demo2{*+height:1%;}
    这一句是什么意思啊。。。木有看懂

    罗伊8年前 (2011-05-16)回复
    • 这个是为IE6和IE7写的 :mrgreen:

      浩子8年前 (2011-05-16)回复
      • content:”.”; 这个起什么作用了

        彼岸8年前 (2011-08-01)回复
  68. #2

    8错!学习了 … 🙂

    [K-H]™8年前 (2011-05-16)回复
  69. #1

    不错,最近也看过几遍清楚浮动不同的方法

    看情况而定啦….

    格桑8年前 (2011-05-16)回复
    • 建议使用推荐的clearfix方法,不改变html是重构的先决条件

      浩子8年前 (2011-05-16)回复

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

立即前往