float: left 卡片堆左上角是因父容器未清除浮动致高度塌陷；卡片间距用 margin 并配合 nth-child 去除末项冗余；响应式需同步调整 width 与 margin；float 与 flex/grid 混用会失效。
float: left 为什么卡片会堆到左上角不换行
因为父容器默认没有设置 width 或 overflow，浮动元素脱离文档流后，父容器高度塌陷，后续内容“看不见”浮动区域，视觉上所有卡片挤在左上角。不是代码写错了，是父容器没兜住。
实操建议：
- 给父容器加
overflow: hidden或overflow: auto（最简兜底方案） - 或用伪元素清除浮动：
::after { content: ""; display: table; clear: both; } - 避免只设
height——它会截断溢出内容，不可靠
卡片间距用 margin 还是 padding
用 margin。padding 是卡片自身内边距，影响内容区域；而卡片之间的空隙属于布局关系，该由外边距控制。但要注意 float 下的 margin 合并问题：右/下相邻卡片的 margin 不会合并，但顶部 margin 可能被父容器“吃掉”。
实操建议：
- 统一给卡片设
margin-right: 16px; margin-bottom: 16px; - 用
:nth-child(n)去掉每行最后一个的margin-right，避免多余空白 - 若卡片宽度固定（如
width: 240px），可算出容器宽度 = (卡片宽 + 水平 margin) × 列数 − 最后一个的 margin，防止最后一列错位
响应式断点下 float 布局错乱怎么办
float 本身不响应，错乱是因为媒体查询里只改了卡片 width，但没同步调整 margin 或父容器 overflow 触发条件，导致换行计算失效。
实操建议：
- 在每个断点中，同时重置卡片
width和margin，例如从width: 300px→width: 48%时，margin-right也要从20px改为2% - 避免用
px写死列数，改用max-width+margin组合更稳定 - 小屏下可直接取消
float，改用display: block; width: 100%强制单列
float 卡片和 flex / grid 混用会出什么问题
会冲突。一旦父容器设了 display: flex 或 display: grid，其子元素的 float 属性完全失效——CSS 规范明确写了：浮动对 flex item 和 grid item 无效果。
实操建议：
- 检查父容器 computed style，确认没被 JS 或其他 CSS 规则意外覆盖为
flex或grid - 调试时临时加
background: pink看卡片是否真在浮动（浮动元素不会撑开背景色，除非清除） - 如果项目已用现代布局，别硬套
float，直接用gap+flex-wrap更干净
float 排卡片现在多数是维护老项目，关键得盯住父容器清除方式和断点间 margin/width 的联动比例——差一点，整行就偏。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
