用CSS Grid替代float可彻底解决多列卡片最后一行高度不齐问题：父容器设display: grid和grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，子项删float、width和margin，用gap控制间距，自动等高、响应式且无需清除浮动。
用 float 布局多列卡片时，最后一行高度不齐怎么办
直接靠 float 实现多列卡片，最容易出现“最后一行卡片塌陷”或“高度参差不齐”，本质是浮动元素脱离文档流后，父容器无法自动包裹子项高度，且各卡片内容长度不同导致高度不一致。
解决思路不是死磕 margin 和 padding，而是先确保父容器能正确包裹浮动子项，并统一卡片基线：
- 给父容器加
overflow: hidden或伪元素清除浮动（::after { content:""; display:table; clear:both; }） - 所有卡片必须设相同
height或使用min-height（比如min-height: 200px），否则文字多的卡片会撑高，破坏对齐 -
padding和margin只用于内部留白和列间距，不能用来“凑齐高度”——那只会让问题更隐蔽
为什么用 margin 调列距反而让卡片错位
浮动布局下，左右外边距（margin-left/margin-right）若没控制好，容易触发“浮动崩塌”：比如某张卡片因内容换行变高，其右侧浮动卡片可能被顶到下一行，而你只调了 margin，没固定宽度或清除浮动，视觉上就“跳行”了。
关键约束条件：
立即学习“前端免费学习笔记（深入）”；
- 每列卡片总宽度（含
width+padding+border+margin）必须 ≤ 父容器宽度 / 列数，否则必然换行 - 推荐用
box-sizing: border-box统一计算方式，避免padding溢出宽度 - 列间距建议用
margin-right给前 n−1 个卡片设值，最后一个用margin-right: 0，别依赖父容器padding补偿
CSS Grid 替代 float 的最小改造方案
如果只是想快速修复现有浮动卡片布局，又不想重写结构，可以直接把父容器从 float 切到 display: grid，几乎零学习成本。
/* 原来用 float 的父容器 */
.card-list {
/* 删除所有 overflow / clearfix 相关代码 */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
<p>.card {
/<em> 保留原有 padding/border，但删掉 float: left </em>/
width: auto; /<em> grid 下 width 自动适配 </em>/
margin: 0; /<em> grid 不依赖 margin 控制列距 </em>/
}这样做的好处：不再需要清除浮动、高度自动对齐、响应式列数随容器缩放，且兼容性已覆盖 Chrome 66+、Firefox 63+、Safari 11.1+。
用 flex 实现等高卡片但列数固定时的陷阱
如果坚持用 display: flex，注意它默认是单行布局。要实现多行等高卡片，必须加 flex-wrap: wrap，但此时 align-items: stretch（默认值）只对同一行内卡片生效，跨行之间并不对齐。
真正起作用的是：
- 给每个
.card设flex: 1 0 280px（即允许放大、不收缩、基础宽度 280px） - 父容器加
align-content: flex-start防止行间额外拉伸 - 仍需配合
min-height或height才能保证视觉整齐，仅靠flex不能替代内容约束
浮动布局的顽疾，本质是它早已不是现代 CSS 布局的合理选择；强行用 margin 和 padding 往里塞，不如花 5 分钟换成 grid —— 那些“看起来齐了”的浮动方案，往往在字体加载、屏幕缩放或内容动态插入时立刻露馅。
