美文网首页
浮动与清除浮动

浮动与清除浮动

作者: Dragoncod | 来源:发表于2016-12-29 18:22 被阅读0次

    浮动(float)

    • 正常流 normal flow
    • 浮动 定位 脱标 out of flow
    • 浮动的目的:可以让多个块级元素放到一行上面。
    float:left;
    float:right;
    float:none;
    position:absolute;
    position:relative;
    position:fixed;
    position:static;
    position:inherit;
    

    清除浮动

    • 清除浮动: 根据情况需要来清除浮动。
    • 清除浮动的目的: 就是为了解决父盒子高度为0 的问题。
    • 清除浮动的方法:
      1.额外标签法
      2.overflow:hidden; 触发bfc模式,就不用清除浮动。
      3.伪元素
    .clearfix:after{
           content:"";
           visibility:hidden;
           display:block;
           height:0;
           clear:both;
    }
    .clearfix{
            zoom:1;
    }
    
    清除浮动真正的叫法应该是闭合浮动。

    4.双伪元素

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

    相关文章

      网友评论

          本文标题:浮动与清除浮动

          本文链接:https://www.haomeiwen.com/subject/nitpvttx.html