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>

 

你可能感兴趣的:(clearfix)