清除浮动的几种方式及优缺点总结

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

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

二、给父级设置高度

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

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

优点：简单，代码简洁
缺点：设置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;
 }

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