一个元素的css设置了浮动（float），会影响到他下面的元素，使html页面显示达不到预期的效果，下面介绍几种值得推荐的有效清除浮动的方法。
方法一：在设置浮动元素的后面新增一个div,将其设置成clear:both
例：
<div class="div">
???<div class="head"></div>
???<div class="content">
???????<div class="top_content">
???????????<div class="top1"></div>
???????????<div class="top2"></div>
???????????<div class="top3"></div>
???????</div>
???????<div class="clearfloat"></div>
???????<div class="next_content"></div>
???</div>
???<div class="foot"></div>
.clearfloat{
???clear: both;
}
方法二：在设置浮动元素的后面新增一个br,将其设置成clear:both例：
<div class="div">
???<div class="head"></div>
???<div class="content">
???????<div class="top_content">
???????????<div class="top1"></div>
???????????<div class="top2"></div>
???????????<div class="top3"></div>
???????</div>
???????<br class="clearfloat"/>
???????<div class="next_content"></div>
???</div>
???<div class="foot"></div>
.clearfloat{
???clear: both;
}
方法三：将父元素的overflow设为隐藏
例：例：
<div class="div">
???<div class="head"></div>
???<div class="content">
???????<div class="top_content">
???????????<div class="top1"></div>
???????????<div class="top2"></div>
???????????<div class="top3"></div>
???????</div>
???????<div class="next_content"></div>
???</div>
???<div class="foot"></div>
.top_content{margin:0 auto;width:1000px;overflow: hidden}清除css浮动问题
原文地址：http://www.cnblogs.com/Dingzy/p/7677646.html