有兴趣的可以亲自试试效果，能够加深印象。
父级div定义 伪类:after和zoom
<style>
.div1 {
background: #000080;
border: 1px solid red;
}
.div2 {
background: #800080;
border: 1px solid green;
height: 100px;
margin-top: 10px;
}
.left {
float: left;
width: 20%;
height: 200px;
background: #DDD;
}
.right {
float: right;
width: 30%;
height: 80px;
background: #DDD;
}
/*清除浮动代码*/
.clearfloat:after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.claerfloat { zoom:1; }
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">Div2</div>
</body>
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom（IE转有属性）可解决IE6、IE7浮动问题；
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾讯、网易、新浪等） ；
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持；
建议：推荐使用，建议定义公共类，以减少CSS代码。
