清除浮动的方法 

 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>

 

posted @ 2018-04-26 11:19  呀，西蓝花  阅读(172)  评论(1)    收藏  举报