在浮动元素末尾添加一个空的标签例如 <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