CSS Float 浮动

CSS float 浮动详解 · 难度：进阶 · +15XP

CSS float 浮动详解

float 属性曾经是 CSS 布局的主力工具，用于让元素浮动到容器的左侧或右侧，使其周围的内容环绕它。虽然现代布局更多使用 Flexbox 和 Grid，但 float 在文字环绕图片等场景中仍然不可替代。

float 属性值

值	行为	效果
none	不浮动（默认）	正常文档流
left	浮动到左侧	元素靠左，内容从右侧环绕
right	浮动到右侧	元素靠右，内容从左侧环绕
inline-start	起始方向浮动	根据书写方向靠起始边
inline-end	结束方向浮动	根据书写方向靠结束边

float: left —— 图片文字环绕

这是 float 最经典的用法：

img.article-img {
  float: left;
  width: 300px;
  margin-right: 20px;
  margin-bottom: 10px;
}
/* 段落的文字会自动环绕图片右侧 */

float: right —— 侧边栏布局

.sidebar {
  float: right;
  width: 300px;
}
.content {
  margin-right: 320px;  /* 为侧边栏留出空间 */
}

清除浮动 clear

当你不想要后续元素环绕浮动元素时，需要使用 clear 属性：

.clear-left  { clear: left; }   /* 清除左侧浮动 */
.clear-right { clear: right; }  /* 清除右侧浮动 */
.clear-both  { clear: both; }   /* 清除两侧浮动 */

清除浮动（Clearfix）经典方案

当容器内所有子元素都浮动后，容器的高度会塌陷为 0。Clearfix 用于解决这个问题：

/* 经典 Clearfix 方案 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
/* 现代替代方案：display: flow-root */
.container {
  display: flow-root;  /* 自动清除内部浮动 */
}
/* 示例 */
<div class="clearfix">
  <div style="float: left; width: 50%;">左列</div>
  <div style="float: right; width: 50%;">右列</div>
</div>

float 的多列布局（传统方案）

.column {
  float: left;
  width: 33.33%;
  padding: 15px;
  box-sizing: border-box;
}
/* 清除最后一行的浮动 */
.row::after {
  content: "";
  display: table;
  clear: both;
}

float vs Flexbox vs Grid

特性	float	Flexbox	Grid
设计目的	文字环绕	一维布局	二维布局
环绕效果	原生支持	不支持	不支持
清除问题	需要 clearfix	无需清除	无需清除
高度塌陷	会塌陷	不会	不会
现代推荐	仅文字环绕	一维排列首选	二维布局首选

float 实际应用场景

/* 1. 图文混排 —— float 最佳场景 */
img.inline-left {
  float: left;
  margin: 0 16px 16px 0;
  border-radius: 8px;
}
/* 2. 首字下沉（传统做法） */
p.dropcap::first-letter {
  float: left;
  font-size: 4em;
  line-height: 0.8;
  margin-right: 8px;
  color: #e74c3c;
}
/* 3. 简单按钮排列 */
.btn-group .btn {
  float: left;
  margin-right: 8px;
}
.btn-group::after {
  content: "";
  clear: both;
  display: table;
}

???? 练习

使用 float: left 创建一个图片靠左、文字环绕的新闻摘要卡片
用 float 实现一个简单的两列布局（侧边栏 + 主内容）
使用 ::first-letter + float 创建杂志风格的首字下沉效果
练习 clearfix：让浮动元素的父容器正确包含它们
对比 float 和 Flexbox 实现同一布局的代码复杂度差异