CSS 浮动（float）全解析：布局 / 文字环绕 / 清除浮动

CSS 浮动（float）是经典的布局方式，核心作用是让元素脱离正常文档流实现横向排列，同时支持文字环绕效果。本文详解浮动的定义、用法、文字环绕特性及清除浮动的核心方法，新手可直接复制代码上手。

一、CSS 浮动核心代码示例

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浮动（float）实战</title>
    <style>
        /* 1. 浮动布局：两个div左浮动，横向排列 */
        #div1 {
            width: 200px;
            height: 100px;
            background-color: lightblue;
            float: left; /* 向左浮动 */
        }
        #div2 {
            width: 200px;
            height: 100px;
            background-color: lightgreen;
            float: left; /* 向左浮动 */
        }
        /* 2. 文字环绕：图片左浮动，文本环绕显示 */
        img {
            width: 100px;
            height: 100px;
            float: left; /* 图片左浮动，文本环绕右侧 */
            margin-right: 10px; /* 增加间距，优化排版 */
        }
    </style>
</head>
<body>
    <!-- 浮动布局演示 -->
    <div id="div1"></div>
    <div id="div2"></div>
    <!-- 清除浮动：恢复正常文档流 -->
    <div style="clear: both;"></div>
    <hr>

    <!-- 文字环绕演示 -->
    <div>
        超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
        您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
        在本教程中，您将学习如何使用 HTML 来创建站点。
        <img src="img/img1.png">
    </div>
</body>
</html>

二、浮动核心知识点说明

1. 浮动基础定义

属性值	效果说明
`float: left`	元素向左浮动，脱离正常文档流
`float: right`	元素向右浮动，脱离正常文档流
`float: none`	默认值，元素不浮动，遵循正常文档流

核心特性：

浮动元素脱离正常文档流，不占据原位置，后续元素会 "填补" 其位置；
多个浮动元素（如示例中两个 div）会按浮动方向横向排列，直到碰到容器边界或其他浮动元素。

2. 文字环绕效果

浮动元素（如示例中的图片）会让后续文本自动环绕在其周围，这是浮动的经典应用场景（如图文混排）。

3. 清除浮动（解决父元素高度塌陷）

问题：

若父元素内只有浮动元素，父元素高度会塌陷为 0（无法包裹子元素）。

两种核心解决方法：

复制代码

/* 方法1：空标签清除（示例中使用的方式） */
.clear {
    clear: both; /* 清除左右两侧所有浮动 */
}

/* 方法2：伪元素清除（推荐，无冗余标签） */
.clearfix::after {
    content: "";       /* 空内容 */
    display: block;    /* 转为块级元素 */
    clear: both;       /* 清除浮动 */
    height: 0;         /* 隐藏伪元素 */
    visibility: hidden;
}

使用伪元素的完整示例：

复制代码

<div class="clearfix">
    <div id="div1"></div>
    <div id="div2"></div>
</div>

三、关键注意事项

清除浮动的取值 ：
- clear: left：清除左侧浮动；
- clear: right：清除右侧浮动；
- clear: both：清除左右两侧浮动（最常用）。
浮动元素的宽高：浮动元素需显式设置宽高（如示例中的 div/img），否则可能因内容为空导致无法显示。
文档流影响：浮动仅影响 "后续元素"，前面的元素不受影响；清除浮动后，后续元素恢复正常文档流。
现代布局替代方案 ：浮动是传统布局方式，现代开发更多用flex/grid布局，但浮动仍适用于文字环绕等场景。

四、典型应用场景

横向导航栏：导航选项左浮动，实现一行排列；
图文混排：图片浮动，文本环绕显示；
多列布局：多个 div 浮动，实现简易的两列 / 三列布局（需配合清除浮动）。

总结

CSS 浮动（float）核心取值为 left/right/none，浮动元素脱离正常文档流，可实现横向排列和文字环绕；
浮动会导致父元素高度塌陷，需通过clear属性或伪元素清除浮动；
浮动是经典布局方式，文字环绕是其不可替代的核心场景，现代布局可结合 flex/grid 使用。