CSS之清除浮动_css 什么是清除浮动-CSDN博客

本文链接：https://blog.csdn.net/hry1243916844/article/details/104775798

什么是CSS清除浮动？

在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

<style>
    .div1 {
        width: 200px;
        height: auto;
        border: 1px solid salmon;
    }

    .div2 {
        width: 30px;
        height: 30px;
        float: left;
        background: royalblue;
    }

    .div3 {
        width: 30px;
        height: 30px;
        float: right;
        background: rosybrown;
    }
</style>

<body>
    <div class="div1">
        <div class="div2">
            div2
        </div>
        <div class="div3">
            div3
        </div>
    </div>
</body>

如图所示，容器没有包围浮动元素。
在这里插入图片描述

清除浮动的方法

1.使用带clear属性的空元素
在浮动元素后使用一个空元素，赋予clear:both属性进行清理

<style>
    ...同上
    .clear {
        clear: both;
    }
</style>

<body>
    <div class="div1">
        <div class="div2">
            div2
        </div>
        <div class="div3">
            div3
        </div>
        <div class="clear"></div>
    </div>
</body>

在这里插入图片描述
2.使用CSS的overflow属性

给浮动元素的容器增加overflow:hidden；或者overflow:auto；浮动元素又回到了容器层，把容器高度撑起，实现清除浮动。

3.给浮动元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，不推荐。

4.使用下一个相邻的元素处理

给浮动后面的元素添加clear属性

<style>
    .div1 {
        width: 200px;
        height: auto;
        border: 1px solid salmon;
        float: left;
    }

    .div2 {
        width: 30px;
        height: 30px;
        float: left;
        background: royalblue;
    }

    .div3 {
        width: 30px;
        height: 30px;
        float: right;
        background: rosybrown;
    }
    .div4{
        clear: both;
        width: 30px;
        height: 30px;
        background: rebeccapurple;
    }
</style>

<body>
    <div class="div1">
        <div class="div2">
            div2
        </div>
        <div class="div3">
            div3
        </div>
        <div class="div4">
            div4
        </div>
    </div>
</body>

在这里插入图片描述
5.使用CSS的:after伪元素

结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack （触发 hasLayout）。

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

<style>
    .div1 {
        width: 200px;
        height: auto;
        border: 1px solid salmon;
        float: left;
    }

    .div2 {
        width: 30px;
        height: 30px;
        float: left;
        background: royalblue;
    }

    .div3 {
        width: 30px;
        height: 30px;
        float: right;
        background: rosybrown;
    }

    .clearfix:after {
        content: " ";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .clearfix {
        /* 为了IE6和IE7浏览器，触发 hasLayout */
        zoom: 1;
    }
</style>

<body>
    <div class="div1">
        <div class="div2">
            div2
        </div>
        <div class="div3">
            div3
        </div>
    </div>
</body>