css清除浮动影响

将清除浮动代码添加到重置样式表中，随时可以调用

1 .clearfix{margin-right:auto;margin-left:auto;*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}

给需要清除浮动影响的元素添加class名 --- clearfix 例：

 1 <!-- css -->
 2     <style>
 3         .top {
 4             width: 100%;
 5             height: 200px;
 6             background-color: yellow;
 7         }
 8         .middle .content {
 9             float: left;
10             margin-top: 20px;
11             width: 100px;
12             height: 400px;
13             background-color: blue;
14         }
15         .clearfix {margin-right:auto;margin-left:auto;*zoom:1}
16         .clearfix:before,.clearfix:after {display:table;content:"";line-height:0}
17         .clearfix:after{clear:both}
18     </style>
1 <!-- html -->
2 <body>
3     <div class="top"></div>
4     <div class="middle clearfix">
5         <div class="content"></div>
6     </div>
7 </body>

 

posted @ 2019-12-08 20:51  ஹ伍陆柒ஹ  阅读(240)  评论(0)  编辑  收藏  举报