清除浮动的三种常用方法

一，添加额外的标签

通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，其他标签br等亦可。

<span style="font-size:18px;"><strong><div class="warp" id="float1">
<h2>添加额外标签</h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
<div style="clear:both;"></div>
</div>
<div class="footer">.footer</div> </strong></span>

二，用伪类：after写入空白元素来清

<style>

<strong><span style="font-size:14px;">.Box{ width:300px; background:#CCC; padding-bottom:10px; margin-bottom:10px;}
.Box .left{ width:145px; height:100px; float:left; background:#F0F;}
.Box .right{ width:145px; height:100px; float:right; background:#F00;}
.clearfloat:after{ display:block; clear:both; content:""; overflow:hidden; height:0}
.clearfloat{ zoom:1;}

</style>

<div class="Box">   

    <div class="left"></div> 

    <div class="right"></div> 

    <div class="clearboth"></div> 

</div></span></strong>

三，父元素设置 overflow：hidden

<strong><span style="font-size:18px;"><div class="warp" id="float3" style="overflow:hidden; *zoom:1;">
<h2>父元素设置 overflow </h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div> </span></strong>

最最精简的代码是

<strong><span style="font-size:18px;">.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; } </span></strong>

文章借鉴http://www.jb51.net/css/67471.html