前端之清除浮動

時間 2019-11-20

標籤前端清除浮動简体版

原文原文鏈接

在頁面的佈局中咱們常常用浮動讓幾個盒子在一行中顯示，但因爲浮動的盒子會脫離文檔流，從而影響下面的佈局，因此咱們必須清除浮動css

下面總結了幾種經常使用的清除浮動的幾種方法：html

給浮動的盒子的父元素的下一個元素加上css樣式：clear: both;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>清除浮動</title>
 6     <style>
 7         .son1 {
 8             width: 100px;
 9             height: 100px;
10             background-color: pink;
11             float: left;        
12         }
13         .son2 {
14             width: 100px;
15             height: 100px;
16             float: left;
17             background-color: purple;
18         }
19         .main {
20             width: 200px;
21             height: 200px;
22             background-color: black;
23             clear: both;  <!---****->
24         }
25     </style>
26 </head>
27 <body>
28     <div class="father clearfix">
29         <div class="son1"></div>
30         <div class="son2"></div>
31         <!-- <div class="additional"></div> -->
32     </div>
33     <div class="main"></div>
34 </body>
35 </html>

View Code

額外標籤法（W3C推薦使用）：在最後一個浮動的子盒子的後面新建一個div，並給出css樣式：clear: both;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>清除浮動</title>
 6     <style>
 7         
 8         .son1 {
 9             width: 100px;
10             height: 100px;
11             background-color: pink;
12             float: left;        
13         }
14         .son2 {
15             width: 100px;
16             height: 100px;
17             float: left;
18             background-color: purple;
19         }
20         .main {
21             width: 200px;
22             height: 200px;
23             background-color: black;
24             /*clear: both;*/
25         }
26         .additional {
27             clear: both;
28         }
29     </style>
30 </head>
31 <body>
32     <div class="father clearfix">
33         <div class="son1"></div>
34         <div class="son2"></div>
35         <div class="additional"></div> 
36     </div>
37     <div class="main"></div>
38 </body>
39 </html>

View Code

overflow清除浮動：給浮動的子盒子的父親添加css樣式：overflow: hidden;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>清除浮動</title>
 6     <style>
 7         .father {
 8             overflow: hidden;
 9         }
10         .son1 {
11             width: 100px;
12             height: 100px;
13             background-color: pink;
14             float: left;        
15         }
16         .son2 {
17             width: 100px;
18             height: 100px;
19             float: left;
20             background-color: purple;
21         }
22         .main {
23             width: 200px;
24             height: 200px;
25             background-color: black;
26         }
27     </style>
28 </head>
29 <body>
30     <div class="father">
31         <div class="son1"></div>
32         <div class="son2"></div>
33     </div>
34     <div class="main"></div>
35 </body>
36 </html>

View Code

僞元素清除浮動;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>清除浮動</title>
 6     <style>
 7         .son1 {
 8             width: 100px;
 9             height: 100px;
10             background-color: pink;
11             float: left;        
12         }
13         .son2 {
14             width: 100px;
15             height: 100px;
16             float: left;
17             background-color: purple;
18         }
19         .main {
20             width: 200px;
21             height: 200px;
22             background-color: black;
23             /*clear: both;*/
24         }
25 
26         /*僞元素清除浮動*/
27         /*正常瀏覽器識別*/
28         .clearfix:after {  
29             content: "";
30             display: block;
31             height: 0;
32             clear: both;
33             visibility: hidden;
34         }
35         /*IE7 及如下識別*/
36         .clearfix {
37             *zoom: 1;  
38         }
39     </style>
40 </head>
41 <body>
42     <div class="father clearfix">
43         <div class="son1"></div>
44         <div class="son2"></div>
45     </div>
46     <div class="main"></div>
47 </body>
48 </html>

View Code

雙僞元素清除浮動.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>清除浮動</title>
 6     <style>
 7         .son1 {
 8             width: 100px;
 9             height: 100px;
10             background-color: pink;
11             float: left;        
12         }
13         .son2 {
14             width: 100px;
15             height: 100px;
16             float: left;
17             background-color: purple;
18         }
19         .main {
20             width: 200px;
21             height: 200px;
22             background-color: black;
23             /*clear: both;*/
24         }
25 
26         /*雙僞元素清除浮動*/
27         /*.clearfix:before, .clearfix:after {
28             content: "";
29             display: table;
30         }
31         .clearfix:after {
32             clear: both;
33         }
34         .clearfix {
35             *zoom: 1;
36         }*/
37     </style>
38 </head>
39 <body>
40     <div class="father clearfix">
41         <div class="son1"></div>
42         <div class="son2"></div>
43     </div>
44     <div class="main"></div>
45 </body>
46 </html>

View Code

注：清除浮動後父元素都會自動檢測浮動孩子的高度，從而可以撐起來，不會影響後面的佈局！瀏覽器

相關標籤/搜索

每日一句

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