浮动元素错位因脱离文档流致父容器无法感知真实高度，矮元素右侧留空使后续元素上浮；硬设height易致溢出或留白；推荐用Grid替代，兼容性差时可退至Flex或用BFC清除浮动。
浮动元素高度不一致时为什么错位
因为 float 会让元素脱离文档流，父容器无法感知子元素真实高度；如果某些浮动子项内容少、高度小，后续浮动项会“上浮”到它右侧空出的区域，视觉上就错行了。这不是 bug，是浮动本意——它本来就是为文字环绕图片设计的。
为什么不能直接设 height 强制统一
硬写 height: 200px 看似简单，但实际中内容长度常变：标题字数不同、描述段落有长有短、响应式下字体缩放……固定高度极易导致文字溢出或大片留白。更麻烦的是，一旦加了 overflow: hidden 隐藏溢出，可能直接切掉重要信息。
用 display: grid 替代浮动的实操要点
Grid 是目前最干净的替代方案，但要注意几个关键点：
- 父容器设
display: grid，别忘了加grid-template-columns（比如repeat(auto-fill, minmax(280px, 1fr))） - 子项不用再写
float，也不需要clear或clearfix - 若需等高布局（如卡片底部对齐），加
align-items: stretch（默认值，通常不用显式写） - 老版本浏览器（IE10/11）不支持 Grid，若必须兼容，得回退到
display: flex+flex-wrap，但 flex 对多行等高控制不如 Grid 稳定
真要保留浮动时怎么救急
如果项目里浮动逻辑太深、一时改不动，至少让父容器能“包住”所有浮动项：
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
overflow: hidden或overflow: auto（触发 BFC） - 或者在最后加一个清浮动的空元素：
<div style="clear: both"></div> - 避免用
clear: both给每个子项加，那会强制换行，破坏横向排列 - 注意
margin-collapse在浮动上下文中失效，外边距行为和普通流不同，调试时别默认套用盒模型直觉
float 和 clear，而是看 Grid 能不能三行代码搞定。真正容易被忽略的，是那些隐藏在响应式断点里的高度塌陷——PC 看着好好的，一缩到平板尺寸，浮动就突然错位，因为媒体查询里忘了重置父容器的清除逻辑。 
