浮动卡片排列空洞的根本原因是浮动元素脱离文档流导致父容器高度塌陷，叠加行内格式化上下文干扰（如换行符空白、基线对齐偏移）及宽度计算误差（如box-sizing未设为border-box），三者共同引发视觉错位；display: flow-root是最简可靠的清除方案，能建立bfc自动包裹浮动子项，避免高度塌陷。
浮动卡片排列空洞的根本原因不是“没清浮动”
空洞（比如某行突然塌陷、右下角按钮飘在半空、最后一行向上缩进）不是因为 clear: both 没加对，而是浮动元素脱离文档流后，父容器高度塌陷 + 行内格式化上下文干扰共同导致的视觉错位。
常见错误现象包括：卡片明明设了统一 min-height，但底部仍高低不平；换行位置随机；响应式下文字折行后卡片高度突增，整行错位。
- 浮动元素不参与父容器高度计算 → 父容器高度为 0 → 后续元素从“零高度底部”开始排布，形成大空白
- HTML 中换行符被解析为空白字符 → 在
font-size: 16px下撑开约 4px 行高 → 浮动元素基线对齐被拉偏 → 视觉上出现间隙或错位 -
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） - 别在父容器上同时设
height或max-height，否则会截断内容伸展 - 若需兼容 IE11，退而使用
.card-list::after伪元素清除：content: ""+display: table+clear: both
真正底部对齐必须放弃浮动
浮动本身不具备行内对齐能力。哪怕你把所有卡片的 min-height 拉到 320px，只要内容高度不同，它们的底部就永远无法落在同一水平线上——这是浮动的固有局限，不是参数没调准。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
要实现“查看详情”按钮全部对齐到底部，必须换布局：
- 用
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
浮动换行错位常被误认为是清除没做好，其实是宽度算超了。浏览器按像素四舍五入判断是否换行，只要总宽多出 1px，整行就塌。
实操要点：
- 务必设
box-sizing: border-box，否则width: 50%+padding: 10px实际占满 50% + 20px，极易溢出 - 浮动元素总宽度（含
margin、border、padding）要 ≤ 父容器宽度，建议预留至少 1px 容错空间 - 避免对左浮动元素设
margin-left（IE6 下会双倍边距），改用margin-right分隔更安全
复杂点在于：空洞往往不是单一问题，而是塌陷 + 白空字符 + 宽度误差三者叠加。调试时得先用开发者工具选中空白区域，确认命中的是哪个节点，再逐层排查是 BFC 缺失、font-size 干扰，还是盒模型算崩了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
