浮动卡片小屏错位主因是父容器高度塌陷，须用伪元素::after+clear:both清除浮动；宽度应使用calc()配合box-sizing:border-box，避免混用flex属性；现代项目优先选grid/flex布局。
浮动卡片在小屏幕错位，是因为没处理好清除浮动
浮动布局做响应式卡片网格，最常遇到的问题不是样式写得不对，而是浮动元素脱离文档流后，父容器高度塌陷，导致后续内容上移、卡片换行错乱。这不是媒体查询没写对，是清除浮动这一步被跳过了。
常见错误现象：float: left 的卡片在 @media (max-width: 768px) 下突然堆成一列但底部参差不齐，或父容器背景色只覆盖前两行。
- 必须给卡片容器（如
.card-grid）设置清除浮动机制，不能只靠overflow: hidden这种“碰运气”方案 - 推荐用伪元素清除：
::after+clear: both，兼容性好且不影响语义 - 避免用
<div style="clear:both"></div>手动插入空标签——破坏结构、增加维护成本
卡片宽度用百分比还是 flex-basis？别混着用
想让三列卡片在桌面端铺满、移动端变单列，直接写 width: 33.33% 看似合理，但加上 padding 或 border 就会撑破容器。这时候有人临时加 box-sizing: border-box，却忘了浮动本身不参与 flex 布局——flex-basis 在浮动上下文中根本不起作用。
使用场景：纯 CSS2 浮动方案下，所有尺寸控制必须基于 width + box-sizing + 清除逻辑，和 Flex 完全无关。
- 每张卡片设
width: calc(33.333% - 20px)（减去左右 margin 总和），比固定百分比更抗干扰 - 统一加
box-sizing: border-box到卡片元素，否则padding会让实际宽度超限 - 不要在浮动卡片上写
display: flex或flex相关属性——它们会被忽略，还可能引发渲染异常
float 在现代响应式中还有必要吗？看你的兼容要求
如果项目要支持 IE9 及以下，float 是唯一能稳定实现多列等高网格的方案；但如果只需兼容 Chrome 80+、Firefox 75+、Safari 13.1+，那应该直接用 display: grid 或 display: flex ——代码更少、行为更可预测。
性能影响：浮动本身开销极小，但清除浮动的伪元素、频繁重排（尤其是动态增删卡片时）会导致性能下降；而 grid 在现代浏览器中由渲染引擎深度优化。
- IE10+ 支持
display: grid，但不支持subgrid和部分函数，日常卡片布局够用 - 用
float时，务必为卡片设置min-height或固定高度，否则高度不一致会导致换行混乱 - 若必须用浮动又需等高效果，只能靠 JS 补齐（如监听 resize 后重算最大高度），这是浮动方案绕不开的硬伤
移动端断点下卡片换行失效，大概率是 white-space 或 font-size 搞的鬼
明明写了 width: 100%，卡片在手机上还是挤成两行甚至三行，检查了半天发现是父容器里有未重置的 white-space: nowrap，或者某层嵌套用了 em 单位的 font-size，间接放大了卡片内文字所占空间，触发了浮动换行阈值。
容易踩的坑：响应式不是只改卡片宽度就够了，字体、内边距、行高这些“软尺寸”同样影响浮动是否能顺利折行。
- 在卡片根元素上强制写
white-space: normal，防止继承自父级的nowrap - 用
rem控制文字大小，并确保根html的font-size在断点内线性变化，避免突兀缩放 - 检查是否有
margin使用em或%，在窄屏下被放大，导致总宽度超 100%
浮动布局的复杂点不在怎么写，而在所有隐式依赖都要手动理清——哪一层设置了什么 font-size，哪个祖先用了 white-space，甚至 line-height 的计算方式都会影响最终换行位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
