019 清除浮動

時間 2019-12-09

標籤清除浮動简体版

原文原文鏈接

一：清除浮動css

1.說明html

　　由於會影響別人url

　　同時，父盒子的高度不少時候是很差控制的。spa

　　因此，消除浮動的影響。設計

2.清除浮動的本質3d

　　主要是爲了解決父級元素由於子級元素浮動引發內部高度爲0的問題code

　　要自動檢測子元素的高度才行，不是給定寫死orm

3.常見的清除浮動的方法htm

　　額外標籤法blog

　　父級添加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.效果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。