仅设 min-height 无法对齐浮动卡片高度，因其仅约束单卡最小高度且无联动，需配合清除浮动实现基础显示，真正底部对齐须改用 flex 或 grid 布局。
直接说结论：只设 min-height 不足以对齐浮动卡片高度，它只能兜底“不塌太矮”，但无法解决多行中卡片视觉参差、底部错位、换行断裂等问题。
为什么 min-height 单独用会失效
浮动卡片脱离文档流后，父容器无法感知子项真实高度；min-height 是每个卡片各自的最小高度约束，彼此之间无联动。当第一行三张卡里有一张内容多（比如标题两行+描述）、另两张很短，它们各自满足 min-height: 240px，但实际高度分别是 280px、240px、240px——结果就是第二行卡片从 280px 那张的底部开始贴靠，视觉上断层明显。
常见错误现象：min-height 设了，但卡片依然“一高一低”、“右下角按钮飘忽”、“最后一行向上缩进”。
使用场景限制：仅适用于内容高度波动极小、且允许留白的静态卡片（如图标+单行文字）；动态内容或图文混排时基本不可靠。
-
min-height必须配合清除浮动（如.card-list::after），否则父容器塌陷，连“最低高度”都显示不出来 - 别和
height混用——一旦某张卡写了height: 240px，它就拒绝拉伸，其他卡会被它带歪 - 响应式断点下，
min-height值需重新评估；移动端文字折行更多，原值常不够用
min-height + 清除浮动是底线组合，不是对齐方案
这是让浮动布局“勉强能看”的最小成本操作，不是真正对齐。必须同步做两件事：
1. 给每张卡片设统一 min-height（例如 min-height: 260px），并确保 box-sizing: border-box
2. 给卡片外层容器加清除浮动，推荐伪元素法：
.card-list::after { content: ""; display: table; clear: both; }（漏掉 display: table 就无效）
性能影响：零开销；兼容性好（IE8+）；但无法解决跨行对齐问题。
容易踩的坑：
– 父容器本身有 height 或 max-height，会直接压制伪元素撑起的高度
– 卡片用了 vertical-align，干扰伪元素基线，导致清除位置偏移
– 在 CSS-in-JS 或 Tailwind 中，伪元素类名难复用，易漏加
真正想让底部对齐，得放弃 float
浮动本身没有“对齐基线”能力。所谓“底部对齐”，本质是让所有卡片在垂直方向上按同一参考线排列，这需要容器级控制逻辑——float 不提供这个能力。
可行替代路径：
- Flex 布局：
.card-list { display: flex; flex-wrap: wrap; align-items: flex-end; }→ 所有卡片底部自动对齐（注意：子项别设float，删干净） - Grid 布局：
.card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: stretch; }→ 行内卡片强制等高 - JS 补高（仅限老浏览器）：取所有
.card的offsetHeight最大值，批量设style.minHeight；但别在循环里反复读取，先缓存再写
最常被忽略的一点：很多项目改用 Flex 后仍保留 float: left，结果子项既在 Flex 容器里又浮动，反而破坏对齐逻辑——删浮动，不是加浮动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
