清除浮动的几种方式

最新推荐文章于 2024-07-19 15:50:46 发布

韭伍後

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量100

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/cai_niao5623/article/details/120668850

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

ps: 清除浮动就是解决子元素浮动父盒子高度为0的问题，下面是没有清除时候的效果图

下面列出几种常见的清除浮动的方式

1、给父盒子高度

<style>
    .box {
        /* 第一种方式：给父盒子高度 */
        height: 50px;  
    }
    .box > div{
        width: 100px;
        height: 50px;
        margin-right: 15px;
        background-color: cadetblue;
        float: left;
    }
    .bro {
        width: 100px;
        height: 50px;
        background-color: chocolate;
    }
</style>
<body>
    <div class="box">
        <div>div1</div>
        <div>div2</div>
    </div>
    <div class="bro">
        div3
    </div>
</body>

2、额外标签法

<style>
    .son{
        width: 100px;
        height: 50px;
        margin-right: 15px;
        background-color: cadetblue;
        float: left;
     }
    .bro {
        width: 100px;
        height: 50px;
        background-color: chocolate;
     }
     /*  空标签法 */
    .box .clear {
        clear: both;
        height: 0;
        line-height: 0;
        font-size: 0;
     }
</style>
<body>
    <div class="box">
        <div class="son">div1</div>
        <div class="son">div2</div>
        <!-- 空标签法 -->
        <div class="clear"></div>
    </div>
    <div class="bro">
        div3
    </div>
</body>

3、overflow方法

    <style>
        .box {
            /* overflow方法 */
            overflow: auto;
        }
        .son{
            width: 100px;
            height: 50px;
            margin-right: 15px;
            background-color: cadetblue;
            float: left;
        }
        .bro {
            width: 100px;
            height: 50px;
            background-color: chocolate;
        }
    </style>
    <body>
        <div class="box">
            <div class="son">div1</div>
            <div class="son">div2</div>
        </div>
        <div class="bro">
            div3
        </div>
    </body>

4、伪元素方法（推荐）

    <style>
        .son {
            width: 100px;
            height: 50px;
            margin-right: 15px;
            background-color: cadetblue;
            float: left;
        }

        .bro {
            width: 100px;
            height: 50px;
            background-color: chocolate;
        }

        /* 伪元素方法 */
        .clearfix {
            *zoom: 1;
            /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
        }
        .clearfix::after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
    </style>
    <body>
        <div class="box clearfix">
            <div class="son">div1</div>
            <div class="son">div2</div>
        </div>
        <div class="bro">
            div3
        </div>
    </body>

5、双伪元素方法

    <style>
        .son {
            width: 100px;
            height: 50px;
            margin-right: 15px;
            background-color: cadetblue;
            float: left;
        }

        .bro {
            width: 100px;
            height: 50px;
            background-color: chocolate;
        }
        /* 双伪元素法 */
        .clearfix:after,
        .clearfix:before {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }
    </style>
    <body>
        <div class="box clearfix">
            <div class="son">div1</div>
            <div class="son">div2</div>
        </div>
        <div class="bro">
            div3
        </div>
    </body>

以上是常用的几种方式，经过上面任意一种清除浮动的方式后，可以看到父盒子的高度正常啦

韭伍後

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
清除浮动的几种方式

ps:清除浮动就是解决子元素浮动父盒子高度为0的问题，下面是没有清除时候的效果图下面列出几种常见的清除浮动的方式1、给父盒子高度<style> .box { /* 第一种方式：给父盒子高度 */ height: 50px; } .box > div{ width: 100px; height: 50px; margin-right: 15px; b.
复制链接

扫一扫