019 清除浮动

一：清除浮动

1.说明

　　因为会影响别人

　　同时，父盒子的高度很多时候是不好控制的。

　　所以，消除浮动的影响。

2.清除浮动的本质

　　主要是为了解决父级元素因为子级元素浮动引起内部高度为0的问题

　　要自动检测子元素的高度才行，不是给定写死

3.常见的清除浮动的方法

　　额外标签法

　　父级添加overflow属性方法

　　使用after伪元素清除浮动

　　使用before和after双伪元素清除浮动

二：方法

1.说明

　　在css中，clear属性用于清除浮动，基本的语法：

　　选择器 { clear：属性值；}

　　属性：

　　left

　　right

　　both

2.额外标签法

　　在最后一个浮动的标签后，再添加一个标签，然后清除浮动

3.案例

　　原本的效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .father {
 8             border:1px solid red;
 9             width: 400px;
10         }
11         .first {
12             width: 100px;
13             height: 100px;
14             background-color: pink;
15             float: left;
16         }
17         .second {
18             width: 100px;
19             height: 100px;
20             background-color: purple;
21             float: left;
22         }
23         .footer {
24             width: 300px;
25             height: 50px;
26             background-color: blue;
27         }
28     </style>
29 </head>
30 <body>
31     <div class="father">
32         <div class="first"></div>
33         <div class="second"></div>
34     </div>
35     <div class="footer"></div>
36 </body>
37 </html>

　　效果：

　　添加额外的元素法：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .father {
 8             border:1px solid red;
 9             width: 400px;
10         }
11         .first {
12             width: 100px;
13             height: 100px;
14             background-color: pink;
15             float: left;
16         }
17         .second {
18             width: 100px;
19             height: 100px;
20             background-color: purple;
21             float: left;
22         }
23         .footer {
24             width: 300px;
25             height: 50px;
26             background-color: blue;
27         }
28         .clear {
29             clear: both;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="father">
35         <div class="first"></div>
36         <div class="second"></div>
37         <div class="clear"></div>
38     </div>
39     <div class="footer"></div>
40 </body>
41 </html>

　　效果：

4.优缺点

　　简单易懂

　　结构化比较差

5.父级添加overflow属性

　　可以通过触发BFC的方式，可以实现浮动效果

　　overflow为hidden，auto，scroll

　　代码简洁　

　　内容增多的时候，容易造成不会自动换行导致内容被影藏掉，无法显示需要溢出的元素

6.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .father {
 8             border:1px solid red;
 9             width: 400px;
10             overflow: hidden;
11         }
12         .first {
13             width: 100px;
14             height: 100px;
15             background-color: pink;
16             float: left;
17         }
18         .second {
19             width: 100px;
20             height: 100px;
21             background-color: purple;
22             float: left;
23         }
24         .footer {
25             width: 300px;
26             height: 50px;
27             background-color: blue;
28         }
29     </style>
30 </head>
31 <body>
32     <div class="father">
33         <div class="first"></div>
34         <div class="second"></div>
35     </div>
36     <div class="footer"></div>
37 </body>
38 </html>

7.伪元素清除浮动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .clearfix:after {
 8             content: "";
 9             display: block;
10             height: 0;
11             clear: both;
12             visibility: hidden;
13         }
14         .clearfix {
15             *zoom: 1;  /*主要是为了ie6的清除方式*/
16         }
17         .father {
18             border:1px solid red;
19             width: 400px;
20         }
21         .first {
22             width: 100px;
23             height: 100px;
24             background-color: pink;
25             float: left;
26         }
27         .second {
28             width: 100px;
29             height: 100px;
30             background-color: purple;
31             float: left;
32         }
33         .footer {
34             width: 300px;
35             height: 50px;
36             background-color: blue;
37         }
38     </style>
39 </head>
40 <body>
41     <div class="father clearfix">
42         <div class="first"></div>
43         <div class="second"></div>
44     </div>
45     <div class="footer"></div>
46 </body>
47 </html>

8.双伪元素清除浮动

　　写法：

 7         .clearfix:before,.clearfix:after {
 8             content: "";
 9             display: table;
10         }
11         .clearfix:after {
12             clear: both;
13         }
14         .clearfix {
15             *zoom: 1;  /*主要是为了ie6的清除方式*/
16         }

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .clearfix:before,.clearfix:after {
 8             content: "";
 9             display: table;
10         }
11         .clearfix:after {
12             clear: both;
13         }
14         .clearfix {
15             *zoom: 1;  /*主要是为了ie6的清除方式*/
16         }
17         .father {
18             border:1px solid red;
19             width: 400px;
20         }
21         .first {
22             width: 100px;
23             height: 100px;
24             background-color: pink;
25             float: left;
26         }
27         .second {
28             width: 100px;
29             height: 100px;
30             background-color: purple;
31             float: left;
32         }
33         .footer {
34             width: 300px;
35             height: 50px;
36             background-color: blue;
37         }
38     </style>
39 </head>
40 <body>
41     <div class="father clearfix">
42         <div class="first"></div>
43         <div class="second"></div>
44     </div>
45     <div class="footer"></div>
46 </body>
47 </html>

三：继续实践

1.index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <link rel="stylesheet" href="css/index.css" />
 7 </head>
 8 <body>
 9     <!-- header部分 -->
10     <div class="header">
11         <div class="inner">
12             <div class="logo">
13                 <!-- 在logo上加一个连接 -->
14                 <a href="#"><img src="image/logo.png" height="63px" alt="logo"></a>
15             </div>
16             <div class="nav">
17                 <!-- nav链接 -->
18                 <ul>
19                     <li><a href="#">首页</a></li>
20                     <li><a href="#">商城</a></li>
21                     <li><a href="#">门店</a></li>
22                     <li><a href="#">平台</a></li>
23                     <li><a href="#">联盟</a></li>
24                     <li><a href="#">关于云道</a></li>
25                 </ul>
26             </div>        
27         </div>
28     </div>
29     <!-- banner部分 -->
30     <div class="banner">
31             <!-- 使用背景-->
32     </div>
33     <!-- 服务块 -->
34     <div class="service">
35         <!-- 我们的产品 -->
36         <div class="service-hd">
37             <h3>
38                 <img src="image/produce.jpg" alt="">
39             </h3>
40             <p>平台上诸多优秀设计师开设个人公众号，分享设计知识、设计经验及行业资讯等内容。为整合更多优质内容，同时也为平台用户带来更好的阅读体验，UI中国推出设计公众号联盟。UI中国愿与优秀设计师们，共同打造良好的设计知识生态圈。</p>
41         </div>
42         <div class="service-bd">
43             <ul>
44                 <li class="service-li-head">
45                     <img src="image/a.jpg" alt="">
46                     <h3>云商场</h3>
47                     <p>能够让企业看到未来互联网网上商城的发展，也能让企业的渗透性得到很大的提升！云商城为什么这么的神奇，看到下文你就知道云商城带给你的魅力了！</p>
48                     <a href="#">用心服务</a>
49                 </li>
50                 <li class="service-li-middle">
51                     <img src="image/b.jpg" alt="">
52                     <h3>云综合</h3>
53                     <p>能够让企业看到未来互联网网上商城的发展，也能让企业的渗透性得到很大的提升！云商城为什么这么的神奇，看到下文你就知道云商城带给你的魅力了！</p>
54                     <a href="#">用心服务</a>
55                 </li>
56                 <li>
57                     <img src="image/c.jpg" alt="">
58                     <h3>云门店</h3>
59                     <p>能够让企业看到未来互联网网上商城的发展，也能让企业的渗透性得到很大的提升！云商城为什么这么的神奇，看到下文你就知道云商城带给你的魅力了！</p>
60                     <a href="#">用心服务</a>
61                 </li>
62 
63             </ul>
64         </div>
65     </div>
66 </body>
67 </html>

2.css

  1 * {
  2     margin: 0;
  3     padding: 0;
  4 }
  5 body {
  6     background-color: #fafafa;
  7 }
  8 .nav li {
  9     list-style: none;
 10     float: left;
 11     margin: 0 20px;
 12 }
 13 
 14 /* 顶部导航栏*/
 15 .header {
 16     height: 63px;
 17     background-color: #fff;
 18 }
 19 .inner {
 20     height: 63px;
 21     width: 1157px;
 22     margin: 0 auto;
 23     /*background-color: #e5c5f6;*/
 24     line-height: 63px; /*行高会继承，所以li会得到*/
 25 }
 26 .logo {
 27     height: 63px;
 28     float: left;
 29 }
 30 .nav {
 31     height: 63px;
 32     float: right;
 33 }
 34 
 35 .nav li a {
 36     color: #333;
 37     text-decoration: none;
 38 }
 39 .nav li a:hover {
 40     color: #207adf;
 41 }
 42 
 43 .banner {
 44     height: 350px;
 45     background: url(../image/banner.jpg) no-repeat top center;
 46 }
 47 .service {
 48     /*margin-top: 75px;*/
 49     width: 1157px;
 50     height: 500px;
 51     margin: 25px auto 0;
 52     /*background-color: pink;*/
 53 }
 54 .service-hd {
 55     border-top: 1px dashed black;
 56     margin: 0 25px; 
 57 }
 58 .service-hd h3 {
 59     width: 103px;
 60     height: 20px;
 61     margin: 0 auto;
 62     margin-top: -8px;
 63 }
 64 .service-hd p {
 65     font-size: 16px;
 66     color: #666;
 67     line-height: 26px;
 68     text-align: center;
 69     width: 900px;
 70     margin: 15px auto 0;
 71 }
 72 
 73 .service-bd {
 74     margin-top: 40px;
 75 }
 76 .service-bd li{
 77     /*border: 1px solid red;*/
 78     width: 330px;
 79     height: 500px;
 80     background-color: #eee;
 81     list-style: none;
 82     float: left;
 83 }
 84 .service-li-head {
 85     margin-left: 30px ; 
 86 }
 87 .service-li-middle {
 88     margin: 0 60px; 
 89 }
 90 
 91 .service-bd img {
 92     /*margin: 30px 48px;*/
 93     margin: 30px auto;
 94     display: block;
 95 }
 96 .service-bd h3 {
 97     text-align: center;
 98     font-size: 18px;
 99     font-weight: normal;
100 }
101 
102 .service-bd p {
103     font-size: 16px;
104     color: #666;
105     width: 200px;
106     margin: 0 auto;
107     line-height: 24px;
108 }
109 .service-bd a {
110     display: block;
111     width: 190px;
112     height: 45px;
113     border: 1px solid #ff9412;
114     margin: 25px auto;
115     text-align: center;
116     line-height: 45px;
117     font-size: 20px;
118     text-decoration: none;
119     border-radius: 8px;
120 }
121 .service-bd a:hover {
122     color: red;
123     background-color: #ff9412;
124 }

3.效果