网页中，经常用浮动的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>
