关于清除浮动的最佳方法

时间 2019-12-20

标签关于清除浮动最佳方法繁體版

原文原文链接

刚才看了http://www.w3cfuns.com/article-1287-1.html的这篇文章css

才明白清楚浮动还有如此多的方法，做者总结了不少不够正确的方法，也给出了比较好的方法html

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

优势：结构和语义化彻底正确,代码量居中
缺点：复用方式不当会形成代码量增长布局

1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并容许可能被生成内容盖住的内容能够进行点击和交互;
4）经过 content:"."生成内容做为最后一个元素，至于content里面是点仍是其余都是能够的，例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样作的,firefox直到7.0 content:”" 仍然会产生额外的空隙；
5）zoom：1 触发IE hasLayout。
经过分析发现，除了clear：both用来清除浮动的，其余代码无非都是为了隐藏掉content生成的内容，这也就是其余版本的闭合浮动为何会有font-size：0，line-height：0。spa

闭合浮动firefox

方法一：code

相对于空标签闭合浮动的方法代码彷佛仍是有些冗余，经过查询发现Unicode字符里有一个“零宽度空格”，也就是U+200B，这个字符自己是不可见的，因此咱们彻底能够省略掉 visibility:hidden了orm

    .clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
    .clearfix { *zoom:1; }

方法二：不大理解，由于第一次见过display:tablehtm

    /* For modern browsers */
    .cf:before,.cf:after {
    content:"";
    display:table;
    }
    .cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */
    .cf { zoom:1; }