这不是“卡住”，而是浮动元素脱离文档流导致父容器塌陷及后续项上浮；修复关键在于用 display: flow-root 触发BFC并改用 Grid/Flex 布局替代 float。
直接结论：这不是“卡住”，是浮动元素脱离文档流后，矮项右侧留白被后续项上浮钻入——修复关键不是调子项，而是让父容器重新感知所有高度，并放弃用 float 做多行栅格布局。
为什么 ul 加 overflow: hidden 有时没用
它确实能触发 BFC 解决父容器塌陷，但有三个常见失效点：
-
overflow: hidden被媒体查询覆盖了，比如平板断点里写了ul { overflow: visible; }，塌陷立刻复现 - 父容器本身有
position: relative或transform，某些旧版 Safari 会弱化 BFC 效果 - 子项用了
margin-bottom拉间距，但浮动下 margin 折叠不可靠，视觉间隙实际由行框高度决定
用 display: flow-root 替代 overflow 更稳妥
这是专为解决浮动塌陷设计的属性，语义明确、无副作用：
- 不会裁剪
box-shadow、position: absolute的下拉菜单或 Tooltip - Chrome 64+ / Firefox 58+ / Safari 12.1+ 全支持，2026 年已无兼容顾虑
- 写法简单：
.card-list { display: flow-root; }，比伪元素少一行 CSS - 多级卡片组（如“热门”“推荐”）每层都得单独加，不能只设最外层
高度不一致本身无法靠 float 对齐
哪怕父容器撑开了，float 也做不到底部对齐或等高拉伸——这不是参数问题，是渲染机制限制：
立即学习“前端免费学习笔记（深入）”；
-
vertical-align对浮动元素无效 - 硬设
height会截断内容；用min-height只兜底，不拉齐 - 靠
padding-bottom“托高”短内容能改善文字基线，但换行逻辑仍错乱 - 真正对齐底部必须换布局：
display: grid配align-items: end，或display: flex配flex-direction: column+margin-top: auto
如果必须保留 float，宽度和 HTML 结构比样式更关键
90% 的错位源于宽度失控，而非清除不彻底：
- 全局加
* { box-sizing: border-box; }，否则width: 33.33%+padding必然超 100% - HTML 中浮动
li标签之间不能有换行或空格，否则渲染器插入约 4px 间隙 - 用
calc()精确控宽：4 列、间隔 12px →width: calc((100% - 36px) / 4) - 避免小数百分比：
width: 33.333%在某些缩放比例下会四舍五入溢出，导致最后一项掉行
最容易被忽略的是：你花一小时调 clear、vertical-align、line-height，其实是在用图文环绕工具强行做栅格系统——错位不是 bug，是 float 在告诉你“该换布局了”。
