清除浮动的几种方法

最新推荐文章于 2021-06-06 10:56:28 发布

虚年

最新推荐文章于 2021-06-06 10:56:28 发布

阅读量532

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/m0_37068028/article/details/54863542

css 专栏收录该内容

2 篇文章

订阅专栏

当我们使用float后,发现父级元素没有被撑开，通常情况下需要清除浮动，以下介绍三种清除浮动的方法：
1. 使用overflow：hidden将元素变成BFC，即可清除内部浮动

    <style>
        .box{
            border: 10px solid #C0A16B;
            width: 300px;
        }
        .child{
            width: 100px;
            height: 100px;
            float: left;
            border: 10px solid #AC2925;
        }

    </style>

    <body>
        <div class="box">
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </body>

这里写图片描述

.box{
            overflow: hidden;
        }

为达到清除内部浮动，我们可以触发box生成BFC，那么box在计算高度时，box内部的浮动元素child也会参与计算。

这里写图片描述

2 . 伪元素

    <style>
        .clearfix:after{
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix{
            width: 300px;
            border: 10px solid #C0A16B;
        }
        .child{
            width: 100px;
            height: 100px;
            float: left;
            border: 10px solid #AC2925;
        }
    </style>
    <body>
        <div class="clearfix">
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </body>

这个css的原理是经过使用after伪对象,它将在应用clearfix的元素结尾添加content中的内容,也就是一个”.”,并且把他设置为块级元素(display=”block”);高度设置为0,clear=”both”,然后将其内容隐藏掉(visibility=”hidden”).这样就会撑开此块级元素。
ie下

.clearfix{
    zoom:1;
}

这里写图片描述

3 . 使用空标签

    <style>
        .box{
            width: 300px;
            border: 10px solid #C0A16B;
        }
        .child{
            width: 100px;
            height: 100px;
            float: left;
            border: 10px solid #AC2925;
        }
    </style>
    <body>
        <div class="box">
            <div class="child"></div>
            <div class="child"></div>
            <div style="clear: both;"></div>
        </div>
    </body>