清除浮动的方法

这里放一个公用的html代码

    <div class="div">
        <div class="box1"></div>
    </div>

BFC

给父元素盒子 overflow:hidden属性的方式撑高，来清除浮动

    .div {
 		overflow:hidden
    }

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

父元素设置伪元素after（常用）

    .box1{
        width: 50px;
        height: 50px;
          background: red;
          float: left;
    }
    .div {
        width: 150px;
        background: #000;
    }

    .div::after{
        display: block;/*有这三个就够了*/
        clear: both;
        content: '';
    }

父级div定义 overflow:auto

原理：使用overflow:auto时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：内部宽高超过父级div时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

父级div 也一起浮动

原理：所有代码一起浮动，就变成了一个整体

优点：没有优点

缺点：会产生新的浮动问题。

建议：不推荐使用，只作了解。