clearfix清除浮動

時間 2019-12-10

標籤 clearfix 清除浮動简体版

原文原文鏈接

在開發html頁面時，咱們常常會用到css的清除浮動，這裏我推薦一種版本的清除方法，我的感受很是好用。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>

相關標籤/搜索