site topic网站专题
首页
>
网站专题
>
专题详情
分享新闻到:

清除浮动的最优方法

互诺科技:2009-11-01 00:00     阅读数:       标签:

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

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

引用CSS代码

以下为引用的内容:

  1. ul{
  2. list-style:none;
  3. height:auto;
  4. margin:0;
  5. padding:0;
  6. background-color:#436973;
  7. }
  8. li{
  9. float:left;
  10. width:80px;
  11. height:80px;
  12. background-color:#83B1DF;
  13. }
  14. .demo{
  15. clear:both;
  16. border:1px solid #FF00FF;
  17. margin-bottom:5px;
  18. }
  19. .overflow{
  20. overflow:auto;
  21. zoom:1;
  22. background-color:#43FF73;
  23. }

引用HTML代码

以下为引用的内容:

  1. <div class="demo">
  2. <ul class="overflow">
  3. <li>1</li>
  4. <li>2</li>
  5. <li>3</li>
  6. <li>4</li>
  7. <li>5</li>
  8. <li>6</li>
  9. <li>7</li>
  10. <li>8</li>
  11. <li>9</li>
  12. </ul>
  13. </div>
  14. <div class="demo">
  15. <ul>
  16. <li>1</li>
  17. <li>2</li>
  18. <li>3</li>
  19. <li>4</li>
  20. <li>5</li>
  21. <li>6</li>
  22. <li>7</li>
  23. <li>8</li>
  24. <li>9</li>
  25. </ul>
  26. </div>

其中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. }

转自鬼仔的Blog,他写的时候用的是最简单,测试后觉得是最优秀的,因为不会有其余的非语义的编码。

本文经已更新后续技术,请关注:http://chinaz.com/Design/Pages/052MIQ2009.html