清除浮动的方式以及各自的优缺点

额外标签法

(在最后一个浮动元素的后面新加一个标签如<div class="clear"></div>，并在其CSS样式中设置clear: both;)

1.优点：简单，通俗易懂，写少量代码，兼容性好
2.缺点：额外增加无语义html元素，代码语义化差，后期维护成本大

给父级设置高度

1.优点：简单，写少量代码，容易掌握
2.缺点：不够灵活，只适用于高度固定的布局

触发父级BFC

(如给父元素设置overflow:hidden，特别注意的是：在IE6中还需要触发hasLayout，例如给父元素设置zoom:1。原理是触发父级BFC后，父元素在计算高度时，浮动的子元素也会参与计算)

1.优点：简单，代码简洁
2.缺点：设置overflow:hidden容易造成不会自动换行导致超出的尺寸被隐藏掉，无法显示要溢出的元素

使用after伪元素

常见的写法如下：

 .clearfix::after {
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    clear: both;
    visibility:hidden;
    font-size: 0;
 }
 
 .clearfix {
    // 注意此处是为了兼容IE6和IE7浏览器，即触发hasLayout
    zoom: 1;
 }

1.优点：符合闭合浮动思想，结构语义化正确
2.缺点：代码量多，因为IE6-7下不支持after伪元素，需要额外写zoom:1来触发hasLayout

原文链接：https://juejin.im/post/5dd53a555188254dfc223e82