clear：清除浮动对下一个元素的布局影响

上面开启BFC的第一种方法可能会对下一个元素的布局产生影响，针对这种影响，

我们可以设置下一个元素的clear属性，可选值：

left: 清除向左浮动元素对它的影响

right：清除向右浮动元素对它的影响

both：清楚两个中最大影响

::after伪元素，配合content,在一个元素后面加入一个行内伪元素

.out{
            background-color: #bfa;
            border: 10px red solid;
           
        }
        .out::after{
            content: "";
            display: block;
            clear: both;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: burlywood;
            float: left;
        }

拓展：

.clearfix同时解决高度塌陷和重叠外边距：

.clearfix::before,.clearfix::after{
            content: "";
            display: table;
            clear: both;
        }