浮动塌陷是卡片总宽超100%的主因；需用overflow:hidden或clearfix清除；margin叠加和box-sizing未设也会导致错位；calc()比纯%更精准；现代项目优先选Flex/Grid。
卡片宽度用 % 但总宽度超 100%？浮动塌陷是元凶
浮动元素脱离文档流，父容器高度塌陷，导致后续内容错位、卡片换行异常。这不是百分比写错了，是父容器没“兜住”浮动子项。
- 必须给父容器加
overflow: hidden或clearfix伪类（::after+clear: both），否则再精确的24.9%也白搭 - 卡片间
margin会叠加进总宽度——比如 4 张卡各24%，再加左右1%margin，实际占满 104%，必然换行 - 推荐用
box-sizing: border-box统一包含 padding/border，避免尺寸计算时漏掉边框
float 卡片等宽排列时，为什么用 calc() 比纯 % 更稳？
当需要固定间隙（比如 16px）又要求等分宽度时，硬写 24% 很难刚好对齐，尤其在小屏下像素四舍五入后容易错位。
- 直接写
width: calc((100% - 48px) / 4)（4 卡 + 3 个 16px 间隙）更可靠，浏览器实时计算，不依赖人工估算 - 注意：IE9+ 支持
calc()，但 IE8 及以下不支持，若需兼容，得回退到%+ 负margin技巧 - 别在
calc()里混用单位错误，比如calc(100% - 16)缺少px会失效
浮动卡片在响应式中断点处突然堆叠？检查 min-width 和容器约束
浮动本身不响应，堆叠不是浮动失效，而是容器变窄后单张卡片宽度撑不开，被迫换行——但换行逻辑常被忽略。
- 给每张卡片设
min-width: 250px（或业务最小可用宽度），防止过小屏幕下卡片被压扁变形 - 父容器若用了
max-width但没配width: 100%，在某些视口下可能意外收缩，间接挤压卡片 - 媒体查询中重置浮动前，先确认是否清除了上一断点的
float，否则残留样式会导致布局错乱
现代项目还该用 float 做卡片布局吗？
能用，但得清楚代价：维护成本高、响应式脆弱、嵌套深时清除逻辑易出错。CSS Grid 或 Flexbox 在绝大多数场景下更直接。
立即学习“前端免费学习笔记（深入）”；
- 如果只是兼容 IE10+，优先用
display: flex+flex-wrap，一行代码替代整套浮动清除 - 若必须用
float（比如老系统增量改造），务必把clearfix封装成可复用 class，别每次手写伪元素 - 最常被忽略的一点：浮动卡片的垂直对齐默认是
baseline，图片高度不一致时底部会参差，加vertical-align: top才真“对齐”
