父容器高度塌陷导致padding-bottom不生效，因浮动子元素脱离文档流；用display: flow-root创建bfc可修复，或用::after伪元素（需content、display、clear三者齐全），避免overflow: hidden的裁剪副作用。
父元素写了padding-bottom却像没生效，不是样式被覆盖或写错了，而是父容器高度塌陷成了 0px——浮动子元素脱离文档流后，父容器压根“看不见”它们，计算出的高度不含任何浮动内容，padding-bottom自然无处可撑。
为什么padding-bottom在浮动布局里总不显形
这不是浏览器 bug，是 float 的原始行为：浮动元素退出普通文档流，父容器只按非浮动内容（比如空文本节点、未浮动的 div）计算高度。一旦里面全是 float: left 或 float: right 的子项，父容器的 computed height 就会是 0 或极小值。你用 DevTools 看一眼 height 和 offsetHeight，基本就能确认。
常见场景包括：图文卡片列表、老式导航栏、带浮动图标的表单项。这些地方加了 padding-bottom: 20px，结果底部紧贴下一个区块，毫无留白。
用display: flow-root直接修复，一行代码搞定
这是现代 CSS 中最干净的解法，它强制父容器创建新的 BFC（块级格式化上下文），让浮动子元素重新被包含进高度计算，同时完全尊重 padding、border 和 background，还不像 overflow: hidden 那样可能裁剪 position: absolute 的下拉菜单或 tooltip。
-
display: flow-root在 Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 均原生支持；IE 已淘汰，无需兼容 - 不要和
overflow: hidden叠加使用——两者都触发 BFC，但组合可能引发渲染异常 - 如果父容器原本是
inline或inline-block，得先确保它是块级（比如加display: block）再设flow-root - 不能和
position: absolute同时作用于一个元素，否则flow-root失效
伪元素清除法必须写全三要素，缺一不可
如果你还在维护需要兼容旧版浏览器的项目，或者组件封装要求零额外 DOM 节点，用 ::after 是稳妥选择。但只写 .parent::after { clear: both; } 是无效的——伪元素必须真实渲染并参与流式布局才能撑开高度。
-
content: ""—— 缺失则伪元素不生成，后续样式全白搭 -
display: block或display: table——inline或flex下clear不起作用；display: table更稳，能避免 margin 折叠问题 -
clear: both—— 混合浮动（左+右）时，只清left或right会漏掉一侧 - 规则必须直接写在父容器选择器上，比如
.card-list::after，不能套在 wrapper 或子元素里
别用overflow: hidden硬扛，副作用真实存在
它确实能触发 BFC 并让 padding-bottom 显形，但代价不小：
- 会裁剪所有溢出内容：下拉菜单、tooltip、阴影、
box-shadow、border-radius的弧度边缘都可能被砍掉 - 如果父容器本该支持滚动（比如动态加载的列表），
overflow: hidden会让滚动条彻底消失 - 对
inline元素无效，必须先加display: block才能生效 - 某些 JS 库依赖
overflow: visible计算尺寸，改它可能破坏动画或定位逻辑
真正卡住人的，往往不是“怎么闭合高度”，而是闭合之后忘了检查父容器是否还有可靠的尺寸锚点——比如图片异步加载完成前、字体未就绪时，高度仍可能短暂为 0。修复完务必用 DevTools 确认 offsetHeight 已非零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
