1-9、如何清除浮动？手写clearfix

2023-02-21 61 阅读1分钟

清除浮动的方法

父级加 overflow:hidden

<style>
    .box {
        overflow: hidden;
        width: 500px;
        margin: 50px auto;
        border: 5px solid red;
    }

    .left {
        width: 200px;
        float: left;
        height: 200px;
        background-color: #ccc;
    }
</style>

父级设置 clearfix

<style>
    .clearfix::after {
        content: '';
        display: block;
        clear: both;
    }
</style>
 <body>
    <div class="box clearfix">
        <div class="left">left</div>
    </div>
</body>

父级也浮动

    .box {
        /* 清除浮动 */
        float: left;
        width: 500px;
        margin: 50px auto;
        border: 5px solid red;
    }

    .left {
        width: 200px;
        /* 脱离文档流了，父级当它不存在，所以父级的高度就收上去了 */
        float: left;
        height: 200px;
        background-color: #ccc;
    }

在父级浮动元素的最后面加上class名字为clear的div也可以清除浮动

<style>
    /* 清除浮动 */
    .clear {
        clear: both;
    }
</style>

<body>
    <div class="box clearfix">
        <div class="left">left</div>
        <!-- 在父级浮动元素的最后面加上class名字为clear的div -->
        <div class="clear"></div>
    </div>
</body>