清除浮动

借鉴CSDN的老哥的，这是原文链接 https://blog.csdn.net/h_qingyi/article/details/81269667
写的很好，易懂又实用

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

如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。

优点：通俗易懂，方便

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

不建议使用。

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

通过触发BFC方式，实现清除浮动

.fahter{
     400px;
    border: 1px solid deeppink;
    overflow: hidden;
}

优点：代码简洁

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

不推荐使用

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

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

<body> <div class="fahter clearfix"> <div class="big">big</div> <div class="small">small</div>  </div> <div class="footer"></div> </body> 优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

推荐使用

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

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


 <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
 <div class="footer">   </div>

优点：代码更简洁

缺点：用zoom:1触发hasLayout.

推荐使用

前端怎么学的会~