CSS清除浮动的八种方法

news2025/2/22 12:35:06

我们为什么需要清除浮动，如果我们不清除浮动会发生什么呢？
基础样式，没清除浮动之前代码：
可复制也可以自己手动布局，后可尝试使用下面介绍的方法练习清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不清除浮动会发生什么</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            width: 400px;
            background-color: red;
        }
        .son {
            width: 150px;
            height: 150px;
            float: left;
            background-color: pink;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">我是浮动后的子元素1</div>
        <div class="son">我是浮动后的子元素1</div>
    </div>
    <div class="box">我是下一个兄弟元素box</div>
</body>

</html>

未清除浮动之前的效果图：
在这里插入图片描述

如图所示：不清除浮动会影响布局，因为我们没有给父级高度，跟父级同级的元素会受到影响，因为给子元素添加浮动，浮动之后，子元素会脱离文档流，父级的下一个兄弟元素就会顶上去，浮动可以设置文字围绕

清除浮动后的效果：
在这里插入图片描述
让我为大家介绍八种清除浮动的方法吧！本人文笔有限，如有不对的地方可以向我提出，感谢大家！

一、给父级div定义伪类(推荐使用)

这个是清除浮动常用的方法
复制可用

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

切记给浮动的父元素添加
在这里插入图片描述

二、clear:both

在浮动尾部添加空div标签，添加上样式clear:both；

.son1 {
	clear:both;
}

在这里插入图片描述

三、overflow:hidden

给父级div定义overflow:hidden

overflow:hidden;

在这里插入图片描述

四、给父级固定的高度height

注意：不适合用在不确定高度的元素上，比如某宝，一直向下滑，会一直刷新出新的商品
请添加图片描述

五、父级随子级一起浮动

在这里插入图片描述
这种方法还是会影响接下来的布局，不过可以解决父级的问题

六、overflow:auto

给浮动元素父级添加overflow:auto;
请添加图片描述

七、display:table

给浮动元素的父级div定义为表格display:table
请添加图片描述

八、br标签

br中有clear属性，添加all可以清除浮动
在这里插入图片描述

清除浮动代码大总结，复制可玩：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动的八种方法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 第一种，给父级div定义伪类，父级没设置高度时 */
        /* 记得给浮动元素的父级添加clearfix类名 */
        /* .clearfix::after {
            display: block;
            content: "";
            height: 0;
            overflow: hidden;
            clear: both;
        }
        .clearfix {
            zoom: 1;
        } */
        .father {
            /* 第三种方法给浮动元素父级添加overflow:hidden */
            /* overflow: hidden; */
            /* 第四种方法给父级添加高度 */
            /* height: 150px; */
            /* 第五种方法父级随子级一起浮动 */
            /* float: left; */
            /* 第六种方法给父级添加overflow:auto */
            /* overflow: auto; */
            /* 第七种方法给父级添加display:table */
            /* display: table; */
            width: 400px;
            background-color: red;
        }
        .son {
            width: 150px;
            height: 150px;
            float: left;
            background-color: pink;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        /* 第二种方法 */
        /* .son1 {
            clear: both;
        } */
    </style>
</head>

<body>
    <!-- 第一种方法的给父级添加clearfix -->
    <div class="father"> 
        <div class="son">我是浮动后的子元素1</div>
        <div class="son">我是浮动后的子元素2</div>
        <!-- 第二种方法clear:both; -->
        <!-- <div class="son1"></div> -->
        <!-- 第八种方法 -->
        <!-- <br clear="all"/> -->
    </div>
    <div class="box">我是下一个兄弟元素box</div>
</body>

</html>