css清除浮动的方式

1）添加额外标签
在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，其他标签br等亦可。弊端：不得不增加无意的代码

<div class="warp" id="float1">
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
<div style="clear:both;"></div>
//或者：<br clear="all" />
</div>
<div class="footer">.footer</div>

2）父元素设置 overflow：hidden

<div class="warp" id="float3" style="overflow:hidden; *zoom:1;">
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>

3）使用:after 伪元素 (用于非IE浏览器)

<style type="text/css">
.clearfix:after { content: ".";display: block;height: 0;clear: both;visibility: hidden; }  
.clearfix {display: inline-block;}  /* for IE/Mac */  
</style><!--[if IE]> 
<style type="text/css">
.clearfix {zoom: 1;/* triggers hasLayout */ 
display: block;/* resets display for IE/Win */}
</style> <![endif]-->

http://blog.csdn.net/kongjiea/article/details/17614729