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>

 

posted @ 2015-06-15 15:40  年少、  阅读(229)  评论(0)  编辑  收藏  举报