浮动元素高度不一致导致“松散”排列，是因为矮元素右侧留白使后续浮动项上浮钻入空隙；根本原因是float脱离文档流致父容器塌陷，视觉错行实为文字绕图逻辑的布局副作用；现代推荐用display: flex替代，天然支持多行换行、等高对齐且无塌陷。
浮动元素高度不一致为什么会“松散”排列
不是元素自己“松”，是后续浮动项钻进了前一个矮元素右侧的空白区——因为 float 让元素脱离文档流，父容器塌陷后，视觉上就出现间隙和错行。这跟文字绕图逻辑一致，但用在布局里就成了副作用。
用 display: flex 替代 float 是最省事的解法
Flex 天然支持多行自动换行 + 单行内等高对齐，不用清浮动、不塌陷、响应式友好：
- 父容器加
display: flex+flex-wrap: wrap+gap: 12px - 子项设
flex: 1 1 280px（或用min-width: 280px） - 若需底部按钮对齐，加
align-items: flex-end；若需顶部对齐，用align-items: flex-start（默认值） - IE11 不支持
gap，可用margin模拟，但要注意首尾项外边距
实在不能动 float，就靠 display: inline-block + vertical-align
比 float 更轻量，不脱离文档流，父容器能正常撑高，且 vertical-align 真正生效：
- 把
float: left换成display: inline-block - 统一加
vertical-align: bottom（底部对齐）或top（顶部对齐） - 必须清除元素间默认的空白符：父容器设
font-size: 0，子项再重设font-size；或用注释删空格 - 别漏写
box-sizing: border-box，否则 padding/margin 容易破坏宽度计算
老项目救急：触发 BFC + 统一基线
如果连 inline-block 都不敢动，至少让排列“看起来紧”：
- 父容器加
display: flow-root（推荐）或overflow: hidden（兼容性好，但慎用于含弹窗/下拉的区域） - 所有浮动项设相同
line-height（无单位值，如1.5），避免行框高度差异放大错位 - 内容短的项补
padding-bottom拉齐文字底部，配合box-sizing: border-box - 媒体查询里缩到平板尺寸时，
flow-root仍有效，但旧版overflow: hidden可能意外裁剪，得单独检查
真正难处理的不是 PC 端错位，而是响应式断点切换后，某一级视口里浮动突然“松开”——往往是因为媒体查询里忘了给新尺寸下的父容器重置 BFC 触发方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
