css最好的清除浮动方法

浮动就是让元素脱离了原本的文本流，按照浮动的指定方向进行移动，直到遇到了父级边界元素或者是相邻的浮动元素才会停下。浮动的元素会使得它的高度塌陷，进而影响到布局的正常显示。

比如，在不清除浮动的情况下：

.box1 {
        width: 200px;
        height: 100px;
        background-color: #e04993;
        float: left;
    }

    .box2 {
        width: 300px;
        height: 100px;
        background-color: blue;
        float: left;
    }

    .box3 {
        width: 600px;
        height: 100px;
        background-color: blueviolet;
    }

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
<div class="box3"></div>

清除浮动后：

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

    .box {
        zoom: 1;  //after伪类，触发IE下haslayout,使元素根据自身内容计算宽高，它的效果和height:1%一样。
    }