只设 min-height 不管用是因为它无法解决浮动导致的父容器高度塌陷和多行卡片底部不对齐问题；需用 display: flow-root 清除浮动或改用 flex/grid 布局实现真正对齐。
只设 min-height 为什么不管用
因为 min-height 是每个卡片独立生效的，彼此不联动。三张卡片分别设了 min-height: 260px，但实际高度是 280px、240px、240px，第一行最矮那张卡底部就成第二行起点——视觉上断层明显，右下角按钮飘忽，最后一行还可能向上缩进。
更关键的是：浮动元素脱离文档流，父容器压根“看不见”子项真实高度；min-height 再统一，也解决不了多行间底部不对齐的问题。
常见错误现象包括：min-height 设了但卡片依然一高一低、换行位置异常、响应式下移动端文字折行后高度突增导致错位。
display: flow-root 是最简可靠的清除方案
给卡片外层容器加 display: flow-root，就能让父容器建立 BFC（块级格式化上下文），自动包裹所有浮动子项，高度不再塌陷——这是现代浏览器（Chrome 64+ / Firefox 58+ / Safari 12.1+）的原生解法，无副作用，也不需要额外伪元素或 overflow 裁剪风险。
实操建议：
- 直接写
.card-list { display: flow-root; }，比overflow: hidden更安全（不会裁掉position: absolute的下拉菜单或 tooltip） - 若需兼容 IE11 及更老版本，退而使用
clearfix类：.card-list::after { content: ""; display: table; clear: both; } - 别在父容器上同时设
height或max-height，否则会截断伪元素或限制内容伸展
真正对齐底部得换布局，不是调 min-height
浮动本身不提供行内对齐能力。哪怕你把 min-height 拉到 320px，只要卡片内容高度不同，它们的底部就永远无法落在同一水平线上——这是浮动的固有局限，不是参数没调准。
要实现真正的底部对齐（比如所有卡片的“查看详情”按钮都对齐），必须放弃浮动：
- 用
display: flex+flex-wrap: wrap+gap替代浮动，再加align-items: flex-end控制单行内底部对齐 - 或直接上
display: grid，用grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))和align-items: end - 如果必须保留浮动（比如老旧项目），至少配合
box-sizing: border-box和统一padding，减少因盒模型差异带来的视觉误差
响应式下浮动卡片宽度计算容易溢出
浮动换行错位常被误认为是清除没做好，其实是宽度算超了。浏览器按像素四舍五入判断是否换行，只要总宽多出 1px，整行就塌。
实操要点：
- 务必设
box-sizing: border-box，否则width: 33.33%+padding: 12px实际占满超过 100% - 浮动卡片用
width: calc(33.33% - 16px)配合margin-right: 16px，每行最后一张清掉margin-right - 移动端断点里重设
min-height值——文字折行更多，原值260px往往不够，建议提升到300px起
浮动不是布局工具，是图文环绕遗留机制。卡片列表这类结构，用 flex 或 grid 才是正解。复杂点不在怎么清浮动，而在要不要继续用它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
