浮动元素高度不一致会导致父容器塌陷和布局错位，根源在于浮动脱离文档流；需通过清除浮动（如伪元素法）并配合vertical-align、Flex或Grid实现对齐与包裹。
浮动元素高度不一致时，常导致父容器塌陷、后续元素错位或布局断裂。核心问题不在“高度不同”，而在于浮动脱离文档流后，父容器无法自动包裹子项。解决的关键是清除浮动影响，并选择适合场景的对齐策略。
清除浮动，让父容器正确包裹
浮动元素不占文档流空间，父容器高度可能变为0。必须主动清除浮动才能恢复正常布局流：
- 给父容器设置 overflow: hidden 或 overflow: auto（简单有效，但慎用于有下拉菜单或阴影溢出的场景）
- 在最后一个浮动子元素后添加空标签并设置 clear: both（如 <div style="clear:both"></div>）
- 使用伪元素清除法（推荐）：在父容器上添加类，CSS中写：
.clearfix::after { content:""; display:table; clear:both; }
多行浮动项的垂直对齐难题
当浮动元素高度差异大（比如图文卡片混排），同一行内元素底部参差不齐，视觉混乱。纯浮动本身不支持行内垂直对齐，需配合其他机制：
- 给所有浮动子项统一设置 vertical-align: top（仅对 inline/inline-block 有效，浮动元素需先转为 inline-block 并取消 float）
- 改用 display: flex 替代浮动：父容器设 display: flex; flex-wrap: wrap;，子项自动按行排列且顶部对齐，高度差异不影响整体结构
- 若必须保留浮动，可借助 line-height 或 padding 手动微调，但缺乏响应性和可维护性
现代替代方案：Flex 与 Grid 更可靠
浮动本为文字环绕设计，强行用于复杂布局易出问题。当前主流对齐方案已转向更语义化、可控性更强的方式：
立即学习“前端免费学习笔记（深入）”；
- Flex 布局：适合一维排列（单行或多行卡片、导航栏、表单对齐），支持 align-items（交叉轴）和 justify-content（主轴）精细控制
- Grid 布局：适合二维网格（如相册、仪表盘），用 grid-template-columns 和 align-items 可同时约束列宽与行高对齐
- 两者均天然规避塌陷问题，无需清除浮动，响应式也更直观
兼容旧项目的小技巧
若仍需维护老代码中的浮动布局，可结合 CSS 属性减少错位感：
- 给浮动子项设置固定高度（height）或最小高度（min-height），保证基本齐平
- 使用 margin-bottom 统一底部间距，比依赖自然高度更可控
- 避免混合浮动与 Flex/Grid 在同一容器中，容易引发渲染冲突
