在CSS森林(30247792)群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动,嘿嘿,这个方法不单使用简单,而且FF、OP、IE7都支持,从此可以告别那又长兼容性又差的FF清浮动的方法了。

方法真的很简单,只要为需要清浮动的标签加上overflow这个属性。

====================CSS=========================
ul{list-style:none;height:auto;margin:0;padding:0;background-color:#436973;}
li{float:left;width:80px;height:80px;background-color:#83B1DF;}
.demo{clear:both;border:1px solid #FF00FF;margin-bottom:5px;}
.overflow{overflow:auto;zoom:1;background-color:#43FF73;}
===============================================

====================HTML=======================

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

===============================================
其中zoom是为了IE6准备的。

完整的Demo

注:忘了一个很重要的内容,并不是所有的overflow属性都可起来一样的效果,比如visible属性就只能对IE起作用。例子可以看这里Demo2
这样的话就有一个问题啦,如果要有高度,而且内容超出高度的时候,定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案:对于IE6及以下版本的IE,可以直接定义高度;对于IE7、FF、OP,可定义min-height。====================CSS=========================
.overflow{height:auto;_height:200px;min-height:200px;overflow:auto;zoom:1;_overflow:visible;}

2007年09月14日

订阅评论
提醒
0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x