浮动卡片高度不一导致断层，因浮动元素脱离文档流使父容器无法包裹子项真实高度，min-height不联动；display: flow-root可建立bfc解决塌陷，但底部对齐需改用flex或grid。
浮动卡片高度不一为什么会导致断层
因为浮动元素脱离文档流，父容器无法感知子项真实高度，min-height只作用于单个卡片，彼此不联动。三张卡片实际高度分别是 280px、240px、240px，第一行最矮的那张卡底部就成了第二行起点——视觉上明显错位，右下角按钮飘忽，最后一行还可能向上缩进。
常见错误现象包括：min-height设了但卡片依然一高一低、换行位置异常、响应式下移动端文字折行后高度突增导致错位。
用 display: flow-root 清除浮动最简可靠
给卡片外层容器加 display: flow-root，就能让父容器建立 BFC，自动包裹所有浮动子项，高度不再塌陷。这是现代浏览器（Chrome 64+ / Firefox 58+ / Safari 12.1+）原生支持的解法，无副作用。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 直接写
.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 拉到 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，整行就塌。
- 检查卡片宽度计算：比如设了
width: 33.33%但父容器有padding或边框，实际可用宽度变小 - 用
calc(33.33% - 20px)时注意减去的是固定间隙，不是百分比间隙 - 移动端建议改用
flex或grid，浮动在响应式场景下容错率太低
浮动卡片布局的复杂点不在“怎么清浮动”，而在“清完之后依然对不齐”。很多人卡在 min-height 和 clear 上反复调试，却没意识到：底部对齐这件事，浮动天生做不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
