以下内容转自: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
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准备的。
注:忘了一个很重要的内容,并不是所有的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 }
2 height : auto ;
3 _height : 200px ;
4 min-height : 200px ;
5 overflow : auto ;
6 zoom : 1 ;
7 _overflow : visible ;
8 }
转自鬼仔的Blog,他写的时候用的是最简单,测试后觉得是最优秀的,因为不会有其余的非语义的编码。