网页设计

您的位置:首页 > 网站专题 > 网页设计 > 详细内容>

清除浮动的最优方法

2010-09-22 21:57 作者: [大 中 小]

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

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

引用CSS代码

引用HTML代码

其中zoom是为了IE6准备的。

完整的Demo

注:忘了一个很重要的内容,并不是所有的overflow属性都可起来一样的效果,比如visible属性就只能对IE起作用。例子可以看这里Demo2

这样的话就有一个问题啦,如果要有高度,而且内容超出高度的时候,定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案:对于IE6及以下版本的IE,可以直接定义高度;对于IE7、FF、OP,可定义min-height。

引用CSS代码

以下为引用的内容:

  1. .overflow{
  2. height:auto;
  3. _height:200px;
  4. min-height:200px;
  5. overflow:auto;
  6. zoom:1;
  7. _overflow:visible;
  8. }