css清除浮动的五种常用方法

父级div定义固定高度height

结尾处加空div标签 clear:both

<style type="text/css"> 
...
/*清除浮动代码*/ 
.clearfloat{clear:both} 
</style> 
<div class="box"> 
    <div class="float-left">Left</div> 
    <div class="float-right">Right</div> 
    <div class="clearfloat"></div> 
</div>

父级div定义伪类:after 和 zoom

<style type="text/css"> 
...
/*清除浮动代码*/ 
.box:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.box{zoom:1}  /*IE兼容*/
</style> 
<div class="box"> 
    <div class="float-left">Left</div> 
    <div class="float-right">Right</div> 
</div>

父级div定义 overflow:hidden
父级div 也一起浮动

css清除浮动的五种常用方法

推荐阅读