父元素高度塌陷导致padding无处展开，因浮动元素脱离文档流使父容器计算高度为0px；可用display:flow-root（推荐）、overflow:hidden（有裁剪风险）或clearfix伪元素修复。
因为父元素高度塌陷了，不是 padding 失效，而是它被撑在一个高度为 0px 的盒子里，根本没空间显示。
父元素高度塌陷是根本原因
浮动元素（float: left 或 float: right）会脱离标准文档流，父元素在计算自身高度时直接“忽略”它们。即使子元素有 height: 200px，父元素的 computed height 仍可能是 0px——此时 padding 虽然存在，但无处可展。
- 用浏览器开发者工具检查父元素的
Computed > height，若显示0px，基本可确认是塌陷 -
padding本身从不“失效”，它始终作用于盒模型的内边距区域 - 常见误判：看到背景色/边框没撑开，就以为
padding没起作用，其实是容器没高度
overflow: hidden 能让 padding 显形，但风险明确
给父元素加 overflow: hidden 是最快让 padding 可见的方式，因为它强制触发 BFC（块级格式化上下文），使父元素重新包含浮动子项、恢复真实高度。
- 副作用极具体：
position: absolute子元素（如下拉菜单、tooltip）、box-shadow延展、transform 偏移内容，都可能被静默裁剪 - 旧版 Safari 中
overflow: auto可能意外出现滚动条 - 若父元素原本依赖
overflow: visible做动画或定位，硬改会破坏逻辑
display: flow-root 是更安全的替代方案
现代项目中，应优先用 display: flow-root 替代 overflow: hidden 来解决塌陷——它同样创建 BFC，但完全不干预溢出行为，padding、border、background 全部自然生效，且不裁剪任何内容。
- 兼容性已足够：Chrome 52+、Firefox 52+、Safari 15.4+、Edge 79+ 原生支持，IE 已淘汰
- 不要和
overflow: hidden叠加使用，两者都触发 BFC，叠加反而可能引发渲染异常 - 如果父容器已有 JS 动态读取
overflow值，换flow-root更安全，不会干扰滚动逻辑
::after 伪元素清除法仍需写全三要素
若需兼容老浏览器（如 IE8+），用伪元素清除仍是稳妥选择，但只写 clear: both 不够——缺任意一项，padding 都不会回来。
- 必须包含
content: ""（否则伪元素不渲染） - 必须设
display: block（inline或flex下clear无效） - 必须用
clear: both（混合浮动时，单清left或right会漏掉一侧） - 规则必须直接绑定在父容器选择器上，不能套在 wrapper 或子元素里
真正容易被忽略的是：浮动布局本身已是过时模式。哪怕只是临时修复，也建议顺手把 float: left 改成 display: flex，删掉所有清除逻辑——padding 会立刻生效，而且不再需要记住这些规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
