css清除浮动

清除浮动的本质：标准流会撑开盒子，若浮动了，浮动元素不占有位置，父亲没有高度，底下盒子会跑上来。要做的就是闭合浮动。

方法

1.额外标签法  加空标签<div>   

<div style="clear: both;"></div>

2.父级添加overflow属性   overflow：hidden

3.使用after伪元素

.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    *zoom: 1;
}

4.使用before和after双伪元素清除浮动

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

.clearfix::after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

 使用的时候，个人习惯使用最后一种，在需要清除浮动的元素的class里直接加上clearfix即可。