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

清除浮动方法及优缺点:
    1.在浮动元素后面添加一个空标签,CSS:clear: both;


    优点:简单
    缺点:添加了无意义标签,语义化差

    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;
        }

你可能感兴趣的:(html/css,css,html,css3)