清除浮动float的方法

　　浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置以及width height属性。而且，同样的代码，在各种浏览器中，显示效果也有可能不相同，这样让　　清楚浮动更难了。

　　1.父级div定义  伪类：after和zoom;

　　　　<style type="text/css">

　　　　　　.div1{background-color:#000;border:1px soild red;}

　　　　　　.div2{background-color:#800080;border:1px soild red;height:100px;margin-top:10px}

　　　　　　.left{float:left;background-color:#ddd;20%;height:200px}

　　　　　　.right{float:right;background-color:#ddd;30%;height:80px}

　　　　</style>

　　　　　　/*清除float代码*/

　　　　　　.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

　　　　　　.clearfloat{zoom:1}

　　　　<div class="div1 clearfloat">

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

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

　　　　</div>

　　　　<div class="div2">

　　　　　　div2

　　　　</div>