用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;
}
.card {
/ 保留原有 padding/border，但删掉 float: left /
width: auto; / grid 下 width 自动适配 /
margin: 0;   / grid 不依赖 margin 控制列距 /
}

这样做的好处：不再需要清除浮动、高度自动对齐、响应式列数随容器缩放，且兼容性已覆盖 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 —— 那些“看起来齐了”的浮动方案，往往在字体加载、屏幕缩放或内容动态插入时立刻露馅。