1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>去除浮动的方法</title>
5 <style type="text/css">
6 li{
7 float: left;
8 width: 90px;
9 height: 40px;
10 background-color: gold;
11 text-align: center;
12 }
13 /*方法一：浮动的祖先元素设置高度，不常用，实际工作中高度都是由内容撑开的*/
14 /*div{
15 height: 100px;
16 }*/
17 /*方法二：clear:both; clear:left; clear:right; 缺陷：margin失效*/
18 /*.div2{
19 clear: left;
20 }*/
21 /*方法三：浮动的祖先元素设置：overflow:hidden;*/
22 /*div{
23 overflow: hidden;
24 }*/
25 /*方法四：祖先元素定义：伪类:after和zoom*/
26 .clearfloat:after{
27 display:block;
28 clear:both;
29 content:"";
30 /*visibility:hidden;*/
31 /*height:0*/
32 }
33 .clearfloat{
34 zoom:1
35 }
36 </style>
37 </head>
38 <body>
39 <div class="clearfloat">
40 <ul>
41 <li>HTML</li>
42 <li>CSS</li>
43 <li>JS</li>
44 <li>HTML5</li>
45 <li>设计模式</li>
46 </ul>
47 </div>
48
49 <div class="div2 clearfloat">
50 <ul>
51 <li>学习方法</li>
52 <li>英语水平</li>
53 <li>面试技巧</li>
54 </ul>
55 </div>
56 </body>
57 </html>
