清除浮動似乎寫css的都要用到,不過各大浏覽器存在兼容性,這樣我們這些CSSer們很頭疼,為了一個清除浮動,甚至要寫很多個代碼來兼容。從實踐中摸索,找到一種簡單的清除浮動的辦法,不單使用簡單,而且FF火狐、Opera、Chrome、IE8都支持,使用時只要為需要清浮動的標簽加上overflow屬性即可。以下來一個完整的例子供參考:
CSS代碼部分:
01
ul{
02
list-style:none;
03
height:auto;
04
margin:0;p
05
adding:0;
06
background-color:#436973;
07
}
08
li{
09
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
ul{
25
list-style:none;
26
height:auto;
27
margin:0;
28
padding:0;
29
background-color:#436973;
30
}
31
li{
32
float
:left;
33
width:80px;
34
height:80px;
35
background-color:#83B1DF;
36
}
37
.demo{
38
clear:both;
39
border:1px solid #FF00FF;
40
margin-bottom:5px;
41
}
42
.overflow{
43
overflow:auto;
44
zoom:1;
45
background-color:#43FF73;
46
}
Html代碼部分如下:
vIEw source