清除浮动方法
原理：IE8以上和非IE浏览器才支持:after,zoom（IE专有属性）可解决IE6,IE7的浮动问题
优点：浏览器支持性好，不容易出现怪问题，目前腾讯网易等大型网站使用此方法
缺点：代码多
建议：推荐使用，建议定义公共类，减少CSS代码
<style type="text/css">
.div1{
background:#000080;
}
.div2{
background:#800080;
height:100px;
}
.left{
float:left;
width:20%;
height:200px;
background:#dddddd;
}
.right{
float:right;
width:30%;
height:200px;
background:200px;
}
.clearfloat{
zoom:1;
}
.clearfloat:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0;
}
</style>
<body>
<div class="div1 clearfloat">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="div2">
div2
</div>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。