浮动元素高度不一致导致错位，是因脱离文档流后父容器塌陷，矮元素右侧留白使后续元素上浮；解决需统一文字基线（padding-bottom+box-sizing）并触发bfc（如display:flow-root），而非硬设height或滥用clear；现代布局应优先选用grid或flex。
为什么float元素高度不一致会错位
因为浮动元素脱离文档流，父容器无法感知真实高度；当某一个浮动项内容少、高度矮，它右侧就会留下空白区域，后续浮动项会“上浮”钻进这个空隙，导致视觉上换行错乱——这不是 bug，是 float 的原始设计逻辑（文字绕图）在布局场景下的副作用。
别硬设 height，但可以统一视觉基线
直接写 height: 200px 看似简单，实际极易出问题：内容变长时溢出，变短时留白，响应式缩放后更难控制。真正可行的是用 padding-bottom 拉齐底部文字基线：
- 测量各块文字底部到容器底的距离差
- 对内容短的项增加
padding-bottom（比如多加16px），把文字“托高”对齐 - 必须配合
box-sizing: border-box，否则padding会撑大总尺寸 - 该法只改善视觉对齐，不解决父容器塌陷，仍需清除浮动
父容器必须能“包住”所有浮动项
错位常伴随父容器高度坍缩，后续内容被吸进浮动区。关键不是给每个子项加 clear: both（那会强制换行），而是让父容器触发 BFC：
-
overflow: hidden最简，但可能意外裁剪弹窗或下拉菜单 -
display: flow-root是专为此设计的，无副作用，现代浏览器全支持 - 伪元素 clearfix（
.clearfix::after { content: ""; display: table; clear: both; }）兼容性好，适合老项目 - 避免用
overflow: auto，滚动条易干扰 UI
真要长期维护，就该停用 float 做布局
浮动不是为栅格系统设计的。现在遇到“并排+自适应+等高”，第一反应不该是调 float 和 clear：
- CSS Grid：三行代码搞定 ——
display: grid+grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)))+align-items: start - Flexbox：
display: flex+flex-wrap: wrap+align-items: stretch（默认），子项用flex: 1 1 280px控制宽度 - 两者天然支持内容自适应高度，无需手动干预
padding或height - 最容易被忽略的是响应式断点里的塌陷——PC 正常，一缩到平板尺寸，错位突然出现，因为媒体查询里忘了重置父容器的 BFC 触发方式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
