前端之清除浮动

在页面的布局中我们经常用浮动让几个盒子在一行中显示，但由于浮动的盒子会脱离文档流，从而影响下面的布局，所以我们必须清除浮动

下面总结了几种常用的清除浮动的几种方法：

  • 给浮动的盒子的父元素的下一个元素加上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

     注：清除浮动后父元素都会自动检测浮动孩子的高度，从而能够撑起来，不会影响后面的布局！

posted @ 2019-02-25 15:51  Sakura媛媛  阅读(137)  评论(0)  编辑  收藏  举报