CSS清除浮动的三种方式

关注

原创最新推荐文章于 2026-07-27 10:13:35 发布 261 阅读 AI 写同款· GEO 优化 ›

【亲测好用】解决Windows系统Vscode终端无法使用yarn报错无法加载文件我明明使用`npm i -g yarn ` 安装成功了甚至在文件夹处 CMD 也可以看到yarn 的版本甚至在Vscode中又重新安装了一遍yarn 为什么还是报错呢？阅读详情

CSS清除浮动

添加新元素并使用 clear:both;
给父元素添加overflow:auto;
给父元素使用伪类和zoom属性

看下面例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
    <style>
        .a1 {
            width: 900px;
            border: 1px solid #ccc;
        }
        
        .a2 {
            width: 300px;
            height: 200px;
            background-color: beige;
            float: left;
        }
        
        .a3 {
            width: 400px;
            height: 300px;
            background-color: aqua;
            float: left;
        }
    </style>
</head>

<body>
    <div class="a1">
        <div class="a2"></div>
        <div class="a3"></div>
        <div class="a4"></div>
    </div>

</body>

</html>

基础样式
没有清除浮动的效果
第一种方式：给第四个div添加clear:both

   .a4 {
            clear: both;
        }

效果图（第一个div的高度被撑开了）
在这里插入图片描述
第二种方式：给父元素添加overflow:auto

.a1 {
            width: 900px;
            border: 1px solid #ccc;
            overflow: auto;
        }

在这里插入图片描述
第三种方式:使用伪类

 .a1 {
            width: 900px;
            border: 1px solid #ccc;
            zoom: 1;
        }
        .a1:after {
            display: block;
            clear: both;
            content: "";
        }

效果图
在这里插入图片描述