CSS clear 属性是一个用于控制浮动元素（floated elements）旁边布局的关键属性。它的主要作用是阻止元素紧挨着其前面（同级）的浮动元素显示，强制该元素在浮动元素的下方开始。

1. clear 属性的作用 (What is clear?)

clear 属性主要用于清除浮动，确保一个元素不会被浮动元素所影响，而是从浮动元素的下方开始布局。

  • 避免内容环绕: 当一个元素浮动时，其后的内容会尝试环绕在它旁边。clear 属性可以阻止这种环绕行为。
  • 保持布局结构: 对于包含浮动元素的父容器，如果没有清除浮动，父容器可能无法正确地包裹浮动子元素，导致高度塌陷。clear 属性（或其衍生技术）是解决这一问题的核心方法之一。
  • 控制元素排列: 强制某个元素始终位于指定方向浮动元素的下方。

2. 语法 (Syntax)

selector {
    clear: value;
}

3. 属性值 (Property Values)

clear 属性接受以下关键字值：

值 描述
none 默认值。 允许元素同时浮动在其左右两侧的浮动元素旁边。不清除任何浮动。
left 元素的左侧不能有浮动元素。如果左侧有浮动元素，该元素会被推到其下方。
right 元素的右侧不能有浮动元素。如果右侧有浮动元素，该元素会被推到其下方。
both 元素的左右两侧都不能有浮动元素。这是最常用的值，可以清除左右两侧的所有浮动。
inherit 继承父元素的 clear 属性值。
initial 将 clear 属性设置为其默认值 none。
unset 如果该属性是继承的，则使用继承值；否则，将其设置为其初始值 none。

4. clear 属性如何工作？

当一个元素设置了 clear: left; 时，它会检查其左侧是否有浮动元素。如果有，它会强制自己向下移动，直到其上边界低于所有左侧浮动元素的下边界。

clear: right; 同理，检查右侧。

clear: both; 则同时检查左右两侧的浮动元素，强制自己向下移动，直到其上边界低于所有左右两侧浮动元素的下边界。

重要提示: clear 属性只作用于块级元素。内联元素设置 clear 是无效的。

5. 默认值 (Default Value)

clear 属性的默认值为 none。

6. 继承性 (Inheritance)

clear 属性是不继承的。每个元素都需要单独设置 clear 属性，以清除它自身所受到的浮动影响。

7. 浏览器兼容性 (Browser Compatibility)

clear 属性在所有现代浏览器中都有非常广泛和良好的支持。它是 CSS 2.1 规范的一部分，因此兼容性极佳。

8. 最佳实践与注意事项

虽然 clear 属性是处理浮动的重要工具，但在现代 Web 开发中，随着 Flexbox 和 CSS Grid 的普及，浮动（和 clear）的使用场景已经大大减少。然而，了解它仍然很重要，尤其是在维护旧项目或特定布局需求时。

“清除浮动”的常见场景与方法

当父容器内有浮动子元素时，父容器的高度可能会塌陷，无法包裹浮动子元素。这是因为浮动元素脱离了文档流，不再占据父容器的空间。为了让父容器能够“感知”到浮动子元素的高度并包裹它们，需要“清除浮动”。

有几种常用的清除浮动的方法：

  1. 在浮动元素后添加一个空的块级元素并设置 clear: both; (不推荐)

    <div class="parent">
    <div class="float-left"></div>
    <div class="float-right"></div>
    <div style="clear: both;"></div> <!-- 不推荐的空元素 -->
</div>

    这种方法会增加不必要的 HTML 元素，语义化差。

  2. 对父容器设置 overflow: hidden; 或 overflow: auto; (有副作用)

    .parent {
    overflow: hidden; /* 或 auto */
}

    原理是触发 BFC (块级格式化上下文)。优点是代码简洁，副作用是可能会裁剪掉超出父容器的内容，或出现不需要的滚动条。

  3. 使用 ::after 伪元素（clearfix hack， 最常用和推荐的浮动清除方法 ）
    这是目前清除浮动最普遍和推荐的方法，它避免了添加额外的 HTML 元素，也没有 overflow 方法的副作用。

    .clearfix::after {
    content: ""; /* 必需 */
    display: block; /* 伪元素必须是块级元素才能应用 clear */
    clear: both; /* 清除左右两侧浮动 */
    visibility: hidden; /* 隐藏伪元素本身 */
    height: 0; /* 确保不占据高度 */
}

/* 兼容旧版 IE */
.clearfix {
    *zoom: 1; /* 触发旧版 IE 的 hasLayout 机制 */
}

    然后在父容器上添加 clearfix 类：

    <div class="parent clearfix">
    <div class="float-left"></div>
    <div class="float-right"></div>
</div>
现代布局替代方案

在现代 Web 开发中，通常使用 Flexbox 或 CSS Grid 来实现布局，它们天然地解决了浮动带来的问题，通常不需要手动清除浮动：

  • Flexbox: 非常适合一维布局（行或列）。父容器设置 display: flex; 后，子元素不会浮动，且父容器会正确包裹它们。
  • CSS Grid: 适用于二维布局。父容器设置 display: grid; 后，子元素的定位和尺寸都由 Grid 布局系统控制，不再受浮动影响。

因此，除非有兼容旧浏览器或特定浮动布局的需求，否则优先考虑使用 Flexbox 或 CSS Grid 来构建布局。

9. 示例 (Examples)

下面通过一个 HTML 和 CSS 示例来演示 clear: both; 的效果，以及如何使用 clearfix 来清除浮动。

HTML (index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS clear 属性示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>CSS <code>clear</code> 属性演示</h1>
        <p>理解如何控制浮动元素旁边的布局。</p>
    </header>

    <main>
        <h2>无清除浮动的情况</h2>
        <div class="example-box no-clear">
            <div class="float-item left">Left Float</div>
            <div class="float-item right">Right Float</div>
            <p>这段文本在浮动元素下方，但父容器的高度没有被浮动元素撑开，发生了塌陷。</p>
            <div class="box-footer">父容器的底部边界（塌陷）</div>
        </div>

        <h2>使用 `clear: both;` 清除浮动</h2>
        <div class="example-box">
            <div class="float-item left">Left Float</div>
            <div class="float-item right">Right Float</div>
            <div class="cleared-element">
                这段文本被设置了 `clear: both;`，所以它会位于所有浮动元素下方。
            </div>
            <div class="box-footer">父容器的底部边界（仍塌陷）</div>
        </div>

        <h2>使用 `clearfix` 清除浮动（推荐）</h2>
        <div class="example-box clearfix">
            <div class="float-item left">Left Float</div>
            <div class="float-item right">Right Float</div>
            <p>这段文本正常排列在浮动元素下方。父容器的高度被浮动元素正确撑开。</p>
            <div class="box-footer">父容器的底部边界（正常）</div>
        </div>
    </main>

    <footer>
        <p>&copy; 2023 clear 属性演示</p>
    </footer>
</body>
</html>

CSS (style.css):

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    background-color: #f0f2f5;
    color: #333;
    line-height: 1.6;
}

header {
    background-color: #007bff;
    color: #fff;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

header h1 {
    margin-top: 0;
    margin-bottom: 10px;
}

main {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

h2 {
    color: #007bff;
    margin-top: 40px;
    margin-bottom: 20px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 5px;
}

.example-box {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 25px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border-radius: 8px;
    /* 注意：这里没有设置明确的高度，让内容撑开 */
}

/* 浮动元素样式 */
.float-item {
    width: 120px;
    height: 80px;
    background-color: #28a745; /* 绿色 */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    border-radius: 5px;
    font-weight: bold;
}

.float-item.left {
    float: left;
    margin-right: 15px;
}

.float-item.right {
    float: right;
    margin-left: 15px;
    background-color: #dc3545; /* 红色 */
}

/* 父容器底部指示器，帮助观察高度塌陷 */
.box-footer {
    border-top: 1px dashed #6c757d;
    padding-top: 5px;
    margin-top: 15px;
    font-size: 0.9em;
    color: #6c757d;
}

/* --- 清除浮动方法演示 --- */

/* 1. 无清除浮动示例中的文本 */
.no-clear p {
    background-color: #ffeeba; /* 警告色 */
    padding: 10px;
    border-left: 3px solid #ffc107;
}

/* 2. 使用 clear: both; 的元素 */
.cleared-element {
    clear: both; /* 核心：清除左右两侧浮动 */
    background-color: #d1ecf1; /* 信息色 */
    padding: 10px;
    margin-top: 10px; /* 增加与浮动元素之间的距离 */
    border-left: 3px solid #17a2b8;
}

/* 3. 清除浮动的 clearfix hack (推荐) */
/* 使用 ::after 伪元素来清除浮动 */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden; /* 隐藏伪元素 */
    height: 0;          /* 确保不占据高度 */
    font-size: 0;       /* 兼容性处理，防止字体大小影响 */
}

/* 兼容旧版 IE 的 hasLayout 触发 */
.clearfix {
    *zoom: 1;
}

/* 清除浮动的父容器内部的段落，使其正常流动 */
.clearfix p {
    background-color: #d4edda; /* 成功色 */
    padding: 10px;
    border-left: 3px solid #28a745;
}


footer {
    text-align: center;
    padding: 20px;
    margin-top: 50px;
    background-color: #343a40;
    color: #ccc;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
    width: 100%;
}

如何测试：

  1. 保存上述 HTML 和 CSS 文件到同一个文件夹中。
  2. 在浏览器中打开 index.html。
  3. 观察效果:
    • 第一个盒子 (无清除浮动的情况): 两个浮动元素并排显示，其后的 p 元素环绕在它们下方。最关键的是，包含浮动元素的父容器 .example-box 的高度发生了塌陷， .box-footer 会显示在两个浮动元素上方（因为它只根据非浮动内容计算高度）。
    • 第二个盒子 (使用 clear: both; 清除浮动): 两个浮动元素并排显示，但 cleared-element 被强制向下移动，位于两个浮动元素下方。然而，父容器的高度依然塌陷，因为 clear 属性只影响被设置了 clear 的元素本身，并不能解决父容器高度塌陷的问题。
    • 第三个盒子 (使用 clearfix 清除浮动): 两个浮动元素并排显示。由于父容器 (.example-box.clearfix) 使用了 clearfix 技术，它内部的 ::after 伪元素会清除浮动，从而撑开父容器的高度，使其能够正确包裹所有的浮动子元素。

通过这个示例，您应该能够清楚地理解 clear 属性如何使元素位于浮动元素下方，以及 clearfix 技术如何解决父容器因浮动子元素而导致的高度塌陷问题。同时，也提醒您在现代 Web 开发中，可以更多地考虑使用 Flexbox 或 CSS Grid 来避免这些与浮动相关的复杂性。

# css # 前端
Logo
火山引擎 ADG 社区

火山引擎开发者社区是火山引擎打造的AI技术生态平台，聚焦Agent与大模型开发，提供豆包系列模型（图像/视频/视觉）、智能分析与会话工具，并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长，新用户可领50万Tokens权益，助力构建智能应用。

更多推荐

OpenClaw 本地部署完整指南（Windows + Ollama）

本文档基于实际部署经验编写，旨在帮助你在 Windows 系统上从零开始搭建 OpenClaw，并连接本地 Ollama 模型（如 Qwen2.5 或 Qwen3），使其具备完整的智能体能力。文档包含了所有关键步骤以及常见问题的解决方案。

avatar 火山引擎 ADG 社区

OpenClaw 小白安装指南（Windows版）

（类似一个能自动执行任务的AI机器人），不是游戏。API Key只保存在你本地电脑的加密文件里，不会上传到任何地方。访问：https://github.com/miaoxworld/openclaw-manager/releases。: 一键安装脚本会自动安装Node.js 22+，如果失败，手动下载安装：https://nodejs.org/：在PowerShell中，鼠标右键就是粘贴，不需要按

avatar 火山引擎 ADG 社区

飞书 × OpenClaw 接入指南：不用服务器，用长连接把机器人跑起来

这个项目存在的意义，就是把“飞书接 OpenClaw”这件事，整理成一套的配置入口，并把官方文档没覆盖到的坑集中写成排查清单。先说清楚它的角色：OpenClaw 现在已经内置官方飞书插件 @openclaw/feishu，功能更完整、维护也更及时。，说明飞书 + AI 的接入已经走通。另外，仓库也推荐了一个新项目：把 OpenClaw 变成“多 Agent 团队”，用多个 Agent 分工，Sla

avatar 火山引擎 ADG 社区