清除浮动的两种方式和原理

DEMO

.bfc-box {
        border: 1px solid yellowgreen;
    }
.float-box {
    float: left;
}
.bb-1 {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}
.bb-2 {
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

浮动无法撑开父元素的原因

如果一个box设置为float，那么这个box会根据BFC原则形成一个独立区域，这个区域相对于外部独立。通俗的理解就是它的宽高已经脱离了父级元素（位置信息还收到父元素影响），在父元素进行高度计算的时候将会忽略它。所谓清除浮动，就是在保留子元素本身的浮动属性的同时，让父元素在进行高度计算的时候考虑子元素的宽高。

方式一 clear

我们可以在bfc-box的底部设置一个空div或者一个伪类，添加这条属性

clear: both;

设置原因

对于clear属性是这样描述的

clear CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。

我们将其设置为both，意指元素下移，并清除之前的左右浮动。 clear还可以设置为left、right，意思是元素下移，并清除之前的左浮动、右浮动。因此，针对上面的DEMO，我们还可以设置clear属性为left，清除之前的左浮动，以达到相同的目的。

方式二将父元素也变为一个BFC

在BFC规则当中有这样一条：

BFC会计算内部浮动元素的高度

具体方法有

overflow: hidden; 
float: left; 
position: absolute;
display: inline-block; 
display: table-cell;

这几种方式都可以将父元素产生自己的BFC。