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

解读浮动闭合最佳方案: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提供的这种方法!!

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

评论 46

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

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

    57282周前 (08-08)回复
  2. #31

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

    123211个月前 (07-19)回复
  3. #30

    辣女啵 wwwlanvbocom

    111个月前 (07-11)回复
  4. #29

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

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

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

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

    candoudou4年前 (2013-10-12)回复
  6. #27

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

    gsl0034年前 (2013-03-30)回复
  7. #26

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

    gsl0034年前 (2013-03-25)回复
  8. #25

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

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

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

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

      浩子6年前 (2011-11-12)回复
  10. #23

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

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

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

    江南6年前 (2011-11-07)回复
  12. #21

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

    linxz6年前 (2011-11-07)回复
  13. #20

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

    小波6年前 (2011-10-25)回复
  14. #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>

    victoriness6年前 (2011-10-11)回复
  15. #18

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

    .clr{zoom:1;}

    kpbiao6年前 (2011-09-26)回复
  16. #17

    zoom也OK… 😎

    莱斐6年前 (2011-09-23)回复
  17. #16

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

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

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

    柒柒6年前 (2011-09-07)回复
  19. #14

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

    wmtimes6年前 (2011-09-07)回复
  20. #13

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

    星尔6年前 (2011-09-06)回复
  21. #12

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

    阿健6年前 (2011-09-03)回复
  22. #11

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

    王宁6年前 (2011-08-27)回复
  23. #10

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

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

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

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

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

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

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

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

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

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

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

      浩子6年前 (2011-05-19)回复
  28. #5

    💡 ,深夜来访,哈哈

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

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

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

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

        ie6不行啊 😕

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

      小波6年前 (2011-11-12)回复
  30. #3

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

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

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

        彼岸6年前 (2011-08-01)回复
  31. #2

    8错!学习了 … 🙂

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

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

    看情况而定啦….

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

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

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

立即前往