闭合浮动方法

转自http://www.jb51.net/css/67471.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。 

精益求精方案:
相对于空标签闭合浮动的方法代码似乎还是有些冗余,通过查询发现Unicode字符里有一个“零宽度空格”,也就是U+200B ,这个字符本身是不可见的,所以我们完全可以省略掉 visibility:hidden了 

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


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值