将清除浮动代码添加到重置样式表中，随时可以调用
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>