浮动元素高度不一致本身不是问题，而是float的设计行为；真正需解决的是父容器塌陷和视觉错位。因float元素脱离文档流，父容器高度坍缩为0，矮项右侧留白致后续项“上浮”错行；须触发BFC（如display:flow-root）恢复包裹，并用padding-bottom+box-sizing对齐文字基线；现代布局应优先选用Grid或Flex。
直接说结论：浮动元素高度不一致本身不是“问题”，而是 float 的设计行为；真正要解决的是它引发的**父容器塌陷**和**视觉错位**，而不是强行拉齐 height。
为什么 float 元素高度不一致会错位
因为 float 元素脱离文档流，父容器计算自身高度时完全忽略它们。当某项内容少、实际高度矮（比如只有标题），它右侧就会空出一块区域；后续浮动项会“上浮”钻进这个空隙，导致视觉换行错乱——这不是 bug，是 float 原本为图文环绕设计的逻辑在布局场景下的副作用。
常见现象包括：height: auto 的父容器背景/边框消失、margin-bottom 失效、后续内容被吸进浮动区。
调试时可在 DevTools 中检查父容器的 computed height，常为 0px。
立即学习“前端免费学习笔记（深入）”；
怎么让父容器正确包裹浮动子项
必须触发 BFC（块级格式化上下文），让父容器重新“感知”浮动子项的真实高度：
-
display: flow-root是首选：语义清晰、无副作用，Chrome 64+ / Firefox 58+ / Safari 12.1+ 全支持 -
overflow: hidden简单但有风险：可能意外裁剪position: absolute的下拉菜单、tooltip 或阴影 - 伪元素 clearfix（
.parent::after { content: ""; display: table; clear: both; }）兼容性好，适合需支持 IE10/11 的老项目 - 避免用
overflow: auto：滚动条易干扰 UI，且某些情况下会因负 margin 或偏移触发意外滚动
注意：height 或 max-height 会覆盖 BFC 撑起的高度，应改用 min-height 或直接移除。
怎么让不同高度的浮动项视觉上对齐底部
别硬写 height: 200px —— 内容一变就溢出或留白，响应式下更难维护。真正可行的是控制文字基线位置：
- 测量各块文字底部到容器底的距离差（比如短项差 16px）
- 给内容短的项加
padding-bottom: 16px，把文字“托高”对齐 - 必须配合
box-sizing: border-box，否则 padding 会让总尺寸超标 - 该法只改善视觉对齐，不替代 BFC 清除——两者要同时做
vertical-align 对 float 元素完全无效，因为它只作用于 inline、inline-block 和 table-cell；写 float: left; vertical-align: middle 不会产生任何效果。
新项目或重构时该用什么替代 float
现在遇到“并排+自适应+等高”，第一反应不该是调 float 和 clear，而是看 Grid 能不能三行代码搞定：
- Grid 实例：
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; } - Flex 实例：
.flex { display: flex; flex-wrap: wrap; align-items: flex-start; } - 两者天然规避塌陷、自动等高、无需清除逻辑，代码量更少、可维护性更高
最容易被忽略的是响应式断点里的塌陷：PC 正常，一缩到平板尺寸，错位突然出现——因为媒体查询里忘了重置父容器的 BFC 触发方式（比如没给 @media (max-width: 768px) 下的容器加 display: flow-root）。
