清除浮动的最优方法

以下内容转自：http://www.twinsenliang.net/skill/20070719.html

在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  }
24 

其中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，他写的时候用的是最简单，测试后觉得是最优秀的，因为不会有其余的非语义的编码。

转载于:https://www.cnblogs.com/Liaoyizhi/archive/2008/06/29/1232032.html