第三十三节 清除浮动的三种方式 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         
 8         .list{
 9             width: 210px;
10             /*height: 400px;*/   /* 实际开发中经常不设置高度，导致子元素无法撑开父元素，所以需要清除浮动 */
11             border: 1px solid black;
12             margin: 50px auto 0;
13             list-style: none;
14             padding: 0;
15             /*overflow: hidden;*/  /* 清除浮动的第一种方法 */
16 
17         }
18 
19         .list li{
20             width: 50px;
21             height: 50px;
22             background-color: gold;
23             margin: 10px;
24             float: left;
25         }
26 
27         /*.clearfix:before{
28             content: '';
29             display: table;
30         }  解决top塌陷的问题*/
31 
32         /*.clearfix:after{
33             content: '';
34             display: table;
35             clear: both;
36         } 清除浮动，一般和top塌陷一起放在公共样式中，先写组，将相同的属性放在一起，然后再写单独的 */
37 
38         .clearfix:before,.clearfix:after{
39             content: '';
40             display: table;
41         }
42 
43         .clearfix:after{
44             clear: both;
45         }
46 
47         .clearfix{
48             zoom:1;  /* IE浏览器独用 */
49         }
50     </style>
51 </head>
52 <body>
53     <!-- ul.list>li{$}*8 -->
54     <ul class="list clearfix">
55         <li>1</li>
56         <li>2</li>
57         <li>3</li>
58         <li>4</li>
59         <li>5</li>
60         <li>6</li>
61         <li>7</li>
62         <li>8</li>
63         <!-- <div style="clear:both"></div> 第二种清除浮动的方式 -->
64     </ul>
65 </body>
66 </html>

 

posted @ 2020-03-05 23:19  kog_maw  阅读(169)  评论(0)    收藏  举报