清除浮动的4种方法

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

优点：通俗易懂，方便

缺点：添加无意义标签，语义化差

基本不会使用。

2.父级添加overflow属性（父元素添加overflow:hidden）（这个也不推荐）

.fahter{
    overflow: hidden;
}

优点：代码简洁

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

基本也不用,就算用overflow:hidden也一般不是用来清除浮动

3.使用after伪元素清除浮动（推荐使用）

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

4.使用before和after双伪元素清除浮动(超级推荐)

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

用的最多的就是双伪元素清除浮动了,不过现在的flex布局挺好用的,不考虑ie的几个bug版本浏览器我还是推荐不要用浮动直接用flex布局.让你用过之后再也不想用浮动