对于IE7、FF、OP清除浮动的最优方法第1/2页

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

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

css代码

ul{

list-style:none;

height:auto;

margin:0;p

adding: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;

}

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准备的。

Overflow hack Demo|www.CSSForest.org

1
2
3
4
5
6
7
8
9

1
2
3
4
5
6
7
8
9

Ghost Zhang

Email:lovej1bz@gmail.com

QQ:22168741

ORG:WebReBuild.ORG www.CSSForest.ORG

Blog:

http://forest.blogbus.com

[Ctrl A 全选 注:如需引入外部Js需刷新才能执行]