CSS學習筆記(一)-21.清除浮動

阿新 • • 發佈：2021-07-14

場景：前面使用浮動的場景前提都是父盒子的高度是確定的，但是實際情況父元素的高度是動態的，根據子盒子的排列高度來展示父盒子的高度。如果不設定父元素的高度。內部放置子盒子，會出現問題，就是父元素高度變成0.子盒子懸浮在父盒子上邊的下方。效果如下：

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-14 08:41:10
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-14 08:45:15
 7  * @Description: 
 
 8  * @FilePath: \css\清除浮動1.html
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 
14 <head>
15     <meta charset="UTF-8">
16     <meta http-equiv="X-UA-Compatible" content="IE=edge">
17     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

18     <title>清除浮動1</title>
19     <style>
20         .box {
21             background-color: pink;
22             border-top: 1px solid black;
23         }
24         
25         .one {
26             height: 200px;
27             width: 300px;
28             background-color: red;
29             float 
: left;
30         }
31         
32         .two {
33             height: 200px;
34             width: 300px;
35             background-color: blue;
36             float: left;
37         }
38         
39         .three {
40             height: 250px;
41             width: 340px;
42             background-color: purple;
43             float: left;
44         }
45     </style>
46 </head>
47 
48 <body>
49     <div class="box">
50         <div class="one"></div>
51         <div class="two">
52         </div>
53         <div class="three"></div>
54     </div>
55 </body>
56 
57 </html>

View Code

解決此問題需要使用清除浮動。

清除浮動的本質：就是清除浮動元素造成的影響。浮動元素懸浮後，就不佔位置了。後面如果來標準流的盒子，則會搶佔位置。前面父元素不設定高度，然後內部浮動元素又不佔位置，所以父元素的高度變成0.

清除浮動後，父元素會根據子元素的高度來自動設定相應的高度。

清除浮動的語法：選擇器{clear:屬性值}

屬性值：left 不允許左側有懸浮元素。

right不允許右側有懸浮元素。

both:不允許兩邊有懸浮元素。

清除元素的策略：又叫閉合浮動。

清除浮動的方法：

1.額外標籤法，又叫隔牆法，w3c推薦做法：

在最後一個子盒子的同級後面加一個同級子盒子，且使用clear:both；屬性。

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-14 08:49:55
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-14 08:59:55
 7  * @Description: 
 8  * @FilePath: \css\清除浮動2.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>隔牆法</title>
18     <style>
19         .box {
20             background-color: pink;
21         }
22         
23         .one {
24             height: 200px;
25             width: 300px;
26             background-color: red;
27             float: left;
28         }
29         
30         .two {
31             height: 200px;
32             width: 260px;
33             background-color: blue;
34             float: left;
35             color: green;
36         }
37         
38         .footer {
39             background-color: black;
40             color: red;
41             height: 200px;
42         }
43         
44         .clear {
45             clear: both;
46         }
47     </style>
48 </head>
49 
50 <body>
51     <div class="box">
52         <div class="one">1</div>
53         <div class="two">2</div>
54         <div class="clear"></div>
55 
56     </div>
57     <div class="footer">footer</div>
58 
59 </body>
60 
61 </html>

View Code

效果圖：

優點：語法簡單。易懂。

缺點：1.每清除一個浮動就要加一個清除標籤，維護麻煩。

2.使用該方法的元素必須是塊級元素，不能是行內元素。

此方法實際開發中基本不使用。

2.父級新增overflow屬性

父級盒子新增overflow屬性，寫法：overflow:hidden

程式碼如下：

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-14 08:49:55
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-14 09:07:34
 7  * @Description: 
 8  * @FilePath: \css\清除浮動2.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>父級新增overflow</title>
18     <style>
19         .box {
20             background-color: pink;
21             overflow: hidden;
22         }
23         
24         .one {
25             height: 200px;
26             width: 300px;
27             background-color: red;
28             float: left;
29         }
30         
31         .two {
32             height: 200px;
33             width: 260px;
34             background-color: blue;
35             float: left;
36             color: green;
37         }
38         
39         .footer {
40             background-color: black;
41             color: red;
42             height: 200px;
43         }
44         /* .clear {
45             clear: both;
46         } */
47     </style>
48 </head>
49 
50 <body>
51     <div class="box">
52         <div class="one">1</div>
53         <div class="two">2</div>
54         <!-- <div class="clear"></div> -->
55 
56     </div>
57     <div class="footer">footer</div>
58 
59 </body>
60 
61 </html>

View Code

效果如下：

優點：程式碼簡潔

缺點：無法顯示溢位部分。

3.父級新增after偽元素。

after偽元素後面在學。目前知道這個寫法。後續再補充筆記。

此方法原理同隔牆法。後面堵門

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-14 08:49:55
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-14 09:12:03
 7  * @Description: 
 8  * @FilePath: \css\清除浮動2.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>父級新增after偽元素</title>
18     <style>
19         .clearfix:after {
20             content: "";
21             display: block;
22             height: 0;
23             clear: both;
24             visibility: hidden;
25         }
26         
27         .clearfix {
28             /* 相容IE6,7 */
29             *zoom: 1;
30         }
31         
32         .box {
33             background-color: pink;
34             /* overflow: hidden; */
35         }
36         
37         .one {
38             height: 200px;
39             width: 300px;
40             background-color: red;
41             float: left;
42         }
43         
44         .two {
45             height: 200px;
46             width: 260px;
47             background-color: blue;
48             float: left;
49             color: green;
50         }
51         
52         .footer {
53             background-color: black;
54             color: red;
55             height: 200px;
56         }
57         /* .clear {
58             clear: both;
59         } */
60     </style>
61 </head>
62 
63 <body>
64     <div class="box clearfix">
65         <div class="one">1</div>
66         <div class="two">2</div>
67         <!-- <div class="clear"></div> -->
68 
69     </div>
70     <div class="footer">footer</div>
71 
72 </body>
73 
74 </html>

View Code

頁面效果同上。

優點：不增加標籤，結構簡單。

缺點：照顧低版本瀏覽器。

4.父級新增雙偽元素。

前後堵門。

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-14 08:49:55
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-14 09:19:46
 7  * @Description: 
 8  * @FilePath: \css\清除浮動2.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>父級新增after偽元素</title>
18     <style>
19         /* .clearfix:after {
20             content: "";
21             display: block;
22             height: 0;
23             clear: both;
24             visibility: hidden;
25         }
26         
27         .clearfix {
28             /* 相容IE6,7 */
29         /* *zoom: 1; */
30         /* } */
31         
32         .clearfix:before,
33         .clearfix:after {
34             content: "";
35             display: table;
36         }
37         
38         .clearfix:after {
39             clear: both;
40         }
41         
42         .clearfix {
43             *zoom: 1;
44         }
45         
46         .box {
47             background-color: pink;
48             /* overflow: hidden; */
49         }
50         
51         .one {
52             height: 200px;
53             width: 300px;
54             background-color: red;
55             float: left;
56         }
57         
58         .two {
59             height: 200px;
60             width: 260px;
61             background-color: blue;
62             float: left;
63             color: green;
64         }
65         
66         .footer {
67             background-color: black;
68             color: red;
69             height: 200px;
70         }
71         /* .clear {
72             clear: both;
73         } */
74     </style>
75 </head>
76 
77 <body>
78     <div class="box clearfix">
79         <div class="one">1</div>
80         <div class="two">2</div>
81         <!-- <div class="clear"></div> -->
82 
83     </div>
84     <div class="footer">footer</div>
85 
86 </body>
87 
88 </html>