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

海南4加1下载:解读浮动闭合最佳方案:clearfix

海南 0至9 www.dg6lh.cn 之前给大家介绍两种浮动闭合的办法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提供的这种方法??!

赞(59)
未经允许不得转载:海南 0至9 » 解读浮动闭合最佳方案:clearfix
分享到: 更多 (0)

评论 51

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #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.

  2. #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 Dalitz1周前 (03-11)回复
  3. #33

    我看看啊

    uu2年前 (2017-08-19)回复
  4. #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)回复
  5. #31

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

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

    辣女啵 wwwlanvbocom

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

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

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

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

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

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

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

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

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

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

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

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

    使用overflow会照成的“点击最外层的轻浮动框会遭成最外层至最内层内容全?。‵F);或者在mouseover造成宽度改变时会出现最外层??橛泄龆酰↖E)”~~看彪叔的blog知道的。不适合嵌套哦

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

      海南 0至97年前 (2011-11-12)回复
  13. #23

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

    江南7年前 (2011-11-09)回复
  14. #22

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

    江南7年前 (2011-11-07)回复
  15. #21

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

    linxz7年前 (2011-11-07)回复
  16. #20

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

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

    这种方法在ie7下是有问题的。(浏览器模式ie7,文档模式ie7)会发现最后一排蓝色div的margin-botton 无效。
    你有解决办法给我留言//www.itfe.org/?p=304
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”//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)回复
  18. #18

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

    .clr{zoom:1;}

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

    zoom也OK… ??

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

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

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

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

    柒柒8年前 (2011-09-07)回复
  22. #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 Suero1周前 (03-11)回复
  23. #13

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

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

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

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

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

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

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

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

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

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

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

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

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

    Jayuh8年前 (2011-05-20)回复
  30. #6

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

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

      海南 0至98年前 (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 Doliveira1周前 (03-11)回复
  31. #5

    ?? ,深夜来访,哈哈

    神秘唯一8年前 (2011-05-17)回复
  32. #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;}方法不错,收了!!

      海南 0至98年前 (2011-05-17)回复
      • 浩哥我试 .clearfix{overflow:auto;_height:1%}

        ie6不行啊 ??

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

      小波7年前 (2011-11-12)回复
  33. #3

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

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

      海南 0至98年前 (2011-05-16)回复
      • content:”.”; 这个起什么作用了

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

    8错!学习了 … ??

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

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

    看情况而定啦….

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

      海南 0至98年前 (2011-05-16)回复

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

立即前往
793| 841| 450| 249| 944| 863| 41| 754| 775| 373|