为什么要清除浮动？

1. 父盒子没有高度。
2. 子盒子浮动了。
3. 影响下面的布局，这时候我们就应该清除浮动了。

如何清除浮动？
推荐使用伪元素清除浮动，方法如下。

 <style>
    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    
    .clearfix {
        /* IE6、7 专有 */
        *zoom: 1;
    }
</style>
<!-- 通过类名调用 -->
<div class="clearfix"></div>