有兴趣的可以亲自试试效果，能够加深印象。

父级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代码。