码迷,mamicode.com
首页 > 其他好文 > 详细

clearfix清除浮动

时间:2015-06-15 16:11:26      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:

在开发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清除浮动

标签:

原文地址:http://www.cnblogs.com/dibaosong/p/4577984.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!