clearfix清除浮动
在开发html页面时,我们经常会用到css的清除浮动,这里我推荐一种版本的清除方法,个人感觉非常好用。
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{clear:both;}
.clearfix{
*zoom:1;
}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>reset</title> 6 <style> 7 *{margin:0;padding:0;} 8 .clearfix:before,.clearfix:after{ 9 content:""; 10 display:table; 11 } 12 .clearfix:after{clear:both;} 13 .clearfix{ 14 *zoom:1; 15 } 16 .box{border:1px red solid;width:200px;} 17 .con{float:left; margin-top: 10px;} 18 </style> 19 </head> 20 <body> 21 <div class="box clearfix"> 22 <div class="con">清除浮动</div> 23 </div> 24 </body> 25 </html>