将清除浮动代码添加到重置样式表中，随时可以调用
.clearfix{margin-right:auto;margin-left:auto;*zoom:}.clearfix:before,.clearfix:after{display:table;content:"";line-height:}.clearfix:after{clear:both}
给需要清除浮动影响的元素添加class名 --- clearfix 例：
<!-- css -->
<style>
.top {
width: 100%;
height: 200px;
background-color: yellow;
}
.middle .content {
float: left;
margin-top: 20px;
width: 100px;
height: 400px;
background-color: blue;
}
.clearfix {margin-right:auto;margin-left:auto;*zoom:}
.clearfix:before,.clearfix:after {display:table;content:"";line-height:}
.clearfix:after{clear:both}
</style>
<!-- html -->
<body>
<div class="top"></div>
<div class="middle clearfix">
<div class="content"></div>
</div>
</body>