浮动与清除浮动完全指南：从浮动布局到现代替代方案

小飞兽 HTML/CSS 268 次阅读 2026-06-18

Introduction

CSS 浮动（float）属性最初是为了实现文字环绕图片效果而设计的（1996年引入），后来被广泛用于两栏/三栏页面布局。在 Flexbox 和 Grid 出现之前，浮动 + 清除浮动几乎是所有 CSS 布局方案的基础。理解浮动的运作机制和清除方法，对维护旧代码和理解现代 CSS 布局都很有帮助。

浮动的基本行为

/* 三种取值 */
img { float: left; }    /* 左浮动，元素贴左边缘，后续内容绕排 */
img { float: right; }    /* 右浮动 */
div { float: none; }     /* 不浮动，默认值 */
/* 文字环绕效果 */
.article-img {
    float: left;
    width: 300px;
    margin: 0 20px 20px 0;
}
.article-img img { width: 100%; height: auto; display: block; }
/* 右侧文字会自动环绕图片 */

两栏浮动布局

/* 经典两栏布局 */
.sidebar { float: left; width: 250px; }
.content { float: left; width: calc(100% - 250px); }
.footer  { clear: both; /* 清除左右浮动，回到正常文档流 */ }
/* 等高两栏（伪等高） */
.sidebar { float: left; width: 250px; padding-bottom: 9999px; margin-bottom: -9999px; }
.content { overflow: hidden; /* BFC 隔离 */ }
.container { overflow: hidden; /* 截掉 sidebar 延伸出去的背景 */ }

清除浮动的四种方法

/* 方法1：clear: both（最传统） */
.footer { clear: both; }
/* 方法2：伪元素 clearfix（最常用）*/
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}
/* 方法3：overflow: hidden/auto（触发 BFC） */
.container { overflow: hidden; }
/* 方法4：display: flow-root（现代方案，推荐） */
.container { display: flow-root; }

现代替代方案对比

/* Flexbox（推荐一维布局） */
.layout { display: flex; }
.sidebar { width: 250px; flex-shrink: 0; }
.content { flex: 1; }
/* 自动等高列，无需清除浮动，支持响应式 */
/* Grid（推荐二维布局） */
.layout { display: grid; grid-template-columns: 250px 1fr; }
/* 何时用哪种 */
/* 浮动：历史兼容，旧项目 */
/* Flexbox：单行/单列方向布局，导航栏、卡片组 */
/* Grid：整体页面架构，复杂二维布局 */

运行效果

在浏览器中打开浮动两栏布局，sidebar 贴在左侧，content 占据剩余宽度。当 content 中的文字很长时，文字自动绕排到 sidebar 右侧。添加 clearfix 后 footer 自动落到两栏下方，不会再卡在 sidebar 旁边。

常见问题

float 脱离文档流吗：脱离，但又不完全脱离。浮动元素从正常布局流中移除，后续块级元素会当作它不存在；但后续行内元素会围绕它排列。

父元素高度塌陷：所有子元素都浮动时，父容器高度变为0。解决方案：clearfix 伪元素或 display: flow-root。
现代项目还用 float 吗：基本不用了。Flexbox 和 Grid 功能更强、语义更清晰。