zoukankan      html  css  js  c++  java
  • 清除浮动的几种方法

    一、clear:both;

    这种方法有一个问题:margin失效。

    二、隔墙法

        <div class="box1">
        </div>
        <div class="cl hl"></div> /*墙*/
            <div class="box2">
        </div>
    
        cl{
            clear: both;
        }
        .hl{
            height: 16px;
        }
    
    • 演化出的“内墙法”

        <div>
            <p></p>
            <p></p> /*两个p都浮动,所以div不会被撑出高*/
            <div class="cl"></div> /*在家里建一堵墙就能让儿子给div撑出高*/
        </div>
    

    注意:一般不使用此方法,会增加页面标签。

    三、overflow:hidden;

    本意就是清除溢出到盒子外面的文字。但是,它能作为偏方来清除浮动。
    注意:一般不使用此方法,因为溢出这个元素所在的区域会被隐藏。

    四、使用伪元素

    .clearfix:after {
            content: '';
            height: 0;
            line-height: 0; /*或 overflow:hidden*/
            display: block;
            visibility: hidden;
            clear: both;
        }
        .clearfix {
            zoom: 1;  /*兼容ie6*/
        }
    

    五、双伪元素标签

    页面上不存在的元素可以通过css添加上去,每个元素都有自己的伪元素。

        .clearfix:before,.clearfix:after {
            content: '';
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            zoom: 1;
        }
    
  • 相关阅读:
    工程师死绝的世界答案-python3版
    PEP 530 -- 异步推导式
    pandas爬虫
    mac下安装memcache
    mac下安装redis
    mac安装adb
    风热感冒,风寒感冒,病毒性感冒,细菌性感冒
    网络异常时抓包操作说明tcpdump+Wireshark
    你家酱油“氨基酸态氮”是多少?酱油的选择
    买安卓手机的一点心得
  • 原文地址:https://www.cnblogs.com/lland/p/6361667.html
Copyright © 2011-2022 走看看