一、浮动布局的自动换行机制
现象
- 父容器
.main宽度800px - 四个子元素
.A、.B、.C、.D均设置float: left，每个宽度400px - 实际渲染结果：第一行显示
.A和.B，第二行显示.C和.D，形成 2×2 网格
原理
浮动元素会依次排列在当前行的可用空间内。
当当前行剩余宽度不足以容纳下一个浮动元素时，该元素会自动换行到下一行开始位置。
本例中的排列过程：
- 第1个浮动
.A占据400px，当前行剩余400px - 第2个浮动
.B正好占满剩余400px，第一行已满 - 第3个浮动
.C发现第一行已无空间，于是换到第二行开头 - 第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;
}