清除浮动的方法（float）

    方式一：
        额外标签法：给浮动的元素后面新增加一个清除浮动的盒子
        例如：
            <div style="float: left">浮动盒子</div>
            <div style="float: left">浮动盒子</div>
            <div style="clear: both">清除浮动盒子</div>  <!--新增清除浮动的标签-->
    
    方式二：
        给父元素添加overflow属性方法，给父级添加 overflow 为 hidden|auto|scroll都可以实现
        例如：
            <div style="overflow: hidden">
                <div style="float: left">浮动盒子</div>
                <div style="float: left">浮动盒子</div>
            </div>

    方式三：
        使用 after 伪元素清除浮动，:after 方式为空元素的升级版，好处是不用单独添加标签
        缺点：:after不支持IE6、7，可以使用zoom：1;
        例如:
            .clearfix:after{
                content:"";
                display:block;
                clear:both;
            }
            .clearfix{
                *zoom:1;  /* IE6、7专用清除浮动方法 */
            }
            <div class="clearfix">
                <div style="float: left">浮动盒子</div>
                <div style="float: left">浮动盒子</div>
            </div>

　　

转载于:https://www.cnblogs.com/qtbb/p/11433172.html