浮动布局的自动换行机制

一、浮动布局的自动换行机制

现象

• 父容器 .main 宽度 800px
• 四个子元素 .A、.B、.C、.D 均设置 float: left，每个宽度 400px
• 实际渲染结果：第一行显示 .A 和 .B，第二行显示 .C 和 .D，形成 2×2 网格

原理

浮动元素会依次排列在当前行的可用空间内。
当当前行剩余宽度不足以容纳下一个浮动元素时，该元素会自动换行到下一行开始位置。

本例中的排列过程：

1. 第1个浮动 .A 占据 400px，当前行剩余 400px
2. 第2个浮动 .B 正好占满剩余 400px，第一行已满
3. 第3个浮动 .C 发现第一行已无空间，于是换到第二行开头
4. 第4个浮动 .D 紧随 .C 之后放在第二行

与 flex-wrap: wrap 的区别

特性	浮动换行	Flexbox 换行
触发方式	被动（宽度不足自动换行）	主动（配合 flex-wrap: wrap）
对齐控制	无法自动调整对齐	可通过 justify-content / align-items 灵活控制
适用场景	旧项目兼容、简单流式布局	现代布局，需要灵活对齐和间距

注：浮动布局在旧项目中仍有应用，但现代开发更推荐 Flexbox 或 Grid。

---

二、固定高度避免浮动父容器塌陷

背景知识回顾（简要）

• 浮动元素会脱离文档流，导致父容器高度塌陷（父容器高度变为 0，除非内部有非浮动内容撑开或使用了清除浮动）

本例中的特殊处理

css

.main {
  height: 800px;   /* 父容器固定高度 */
}

• 由于父容器 .main 的 height 被显式设置为 800px，即使内部全是浮动元素，父容器依然保持该高度，不会出现塌陷
• 此时不需要使用 clearfix 或 overflow: hidden 来清除浮动

适用场景

情况	推荐方案
父容器高度已知且固定（如设计稿精确控制）	直接设置 height，简单有效
父容器高度需要由内容动态撑开	不能使用固定高度，需用 clearfix 或 overflow: hidden 清除浮动

补充：动态撑开时的常用清除浮动方法

css

/* 方法1：clearfix 经典写法 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 方法2：overflow 触发 BFC */
.main {
  overflow: hidden;
}