CSS清除浮动的几种方法的优缺点

清除浮动方法及优缺点：

    1.在浮动元素后面添加一个空标签，CSS：clear: both;

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

    优点：简单

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

    2.父元素CSS添加：overflow: hidden;

    优点：简单；

    缺点：内容增多时不会显示溢出的内容；

    3.使用伪元素after（父元素设置）（推荐）

    .clearfix::after{ //伪元素是行内元素 正常浏览器清除浮动方法

            content: "";

            display: block;

            height: 0;

            clear:both;

            visibility: hidden;

        }

        .clearfix{

            *zoom: 1; //ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行

        }

    优点：符合语义化；

    缺点：ie低版本不支持；

    4.after, before双伪元素清除浮动（推荐）

    .clearfix::after,.clearfix::before{

            content: "";

            display: table;

        }

        .clearfix:after{

            clear: both;

        }

        .clearfix{

            *zoom: 1;

        }