【Web】网页清除浮动的方法

　　网页中，经常用浮动的div来布局，但是会出现父元素因为子元素浮动引起内部高度为0的问题，为了解决这个问题，我们需要清除浮动，下面介绍4中清除浮动的方法。

　　在CSS中，clear属性用户清除浮动，语法：选择器{ clear: left || right || both; };

方法一：额外标签法

　　在浮动元素末尾添加一个空的标签，如：<div style="clear: both"></div>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .box1 {
 8             width: 600px;
 9             background-color: gray;
10         }
11         .box2 {
12             width: 600px;
13             height: 200px;
14             background-color: purple;
15         }
16         .son1 {
17             width: 150px;
18             height: 100px;
19             background-color: skyblue;
20             float: left;
21         }
22         .son2 {
23             width: 250px;
24             height: 100px;
25             background-color: hotpink;
26             float: left;
27         }
28     </style>
29 </head>
30 <body>
31     <div class="box1">
32         <div class="son1"></div>
33         <div class="son2"></div>
34         <!-- 额外标签法 -->
35         <div style="clear: both;"></div>
36     </div>
37     <div class="box2">
38         
39     </div>
40 </body>
41 </html>

方法二：父级添加overflow属性法

　　给父级添加overflow属性，触发BFC的方式，可以实现清除浮动效果。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .box1 {
 8             width: 600px;
 9             background-color: gray;
10             overflow: hidden;
11         }
12         .box2 {
13             width: 600px;
14             height: 200px;
15             background-color: purple;
16         }
17         .son1 {
18             width: 150px;
19             height: 100px;
20             background-color: skyblue;
21             float: left;
22         }
23         .son2 {
24             width: 250px;
25             height: 100px;
26             background-color: hotpink;
27             float: left;
28         }
29     </style>
30 </head>
31 <body>
32     <!-- 父级添加overflow属性法 -->
33     <div class="box1">
34         <div class="son1"></div>
35         <div class="son2"></div>
36     </div>
37     <div class="box2">
38         
39     </div>
40 </body>
41 </html>

方法三：使用after伪元素法

　　使用:after方式，为第一种方法的升级版。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .box1 {
 8             width: 600px;
 9             background-color: gray;
10         }
11         .box2 {
12             width: 600px;
13             height: 200px;
14             background-color: purple;
15         }
16         .son1 {
17             width: 150px;
18             height: 100px;
19             background-color: skyblue;
20             float: left;
21         }
22         .son2 {
23             width: 250px;
24             height: 100px;
25             background-color: hotpink;
26             float: left;
27         }
28         .clearfix:after {
29             content: ".";   /*内容为小点，尽量加不要空，否则旧版本浏览器有空隙*/
30             display: block;
31             height: 0; /*高度为0*/
32             visibility: hidden;/*隐藏盒子*/
33             clear:both;/*清除浮动*/
34         }
35         .clearfix {
36             *zoom: 1; /**代表ie6、7能识别的 zoom是ie6、7清除浮动的方法*/
37         }
38     </style>
39 </head>
40 <body>
41     <div class="box1 clearfix">
42         <div class="son1"></div>
43         <div class="son2"></div>
44     </div>
45     <div class="box2">
46         
47     </div>
48 </body>
49 </html>

方法四：使用before和after双伪元素法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .box1 {
 8             width: 600px;
 9             background-color: gray;
10         }
11         .box2 {
12             width: 600px;
13             height: 200px;
14             background-color: purple;
15         }
16         .son1 {
17             width: 150px;
18             height: 100px;
19             background-color: skyblue;
20             float: left;
21         }
22         .son2 {
23             width: 250px;
24             height: 100px;
25             background-color: hotpink;
26             float: left;
27         }
28         .clearfix:before, .clearfix:after {
29             content: "";
30             display: table; /*可以触发BFC BFC可以清除浮动*/
31         }
32         .clearfix:after {
33             clear:both;/*清除浮动*/
34         }
35         .clearfix {
36             *zoom: 1; /**代表ie6、7能识别的 zoom是ie6、7清除浮动的方法*/
37         }
38     </style>
39 </head>
40 <body>
41     <div class="box1 clearfix">
42         <div class="son1"></div>
43         <div class="son2"></div>
44     </div>
45     <div class="box2">
46         
47     </div>
48 </body>
49 </html>