父容器高度塌陷导致padding不可见，因浮动子元素脱离文档流；推荐用display: flow-root创建bfc解决，或规范使用::after伪元素清除浮动，避免overflow:hidden副作用。
为什么padding写了却像没生效
不是padding没起作用，而是父容器高度塌陷成了 0px——浮动子元素脱离文档流后，父容器“看不见”它们，计算出的高度是空的。padding确实存在，但它被撑在一个视觉上不存在的盒子里，自然看不到留白效果。用开发者工具检查父容器的 computed height，如果显示 0px 或远小于预期，基本就是这个原因。
display: flow-root 是最干净的解法
给父容器加 display: flow-root，它会创建新的 BFC（块级格式化上下文），强制包含所有浮动子元素，同时完全尊重 padding、border 和 background，还不像 overflow: hidden 那样可能裁剪下拉菜单、tooltip 等溢出内容。
-
display: flow-root在 Chrome 52+、Firefox 52+、Safari 15.4+、Edge 79+ 均原生支持，IE 不支持（但 IE 已淘汰） - 不要和
overflow: hidden混用——两者都触发 BFC，但叠加可能引发意料外的渲染行为 - 如果父容器已有
overflow: visible且被 JS 动态依赖，改flow-root更安全，不会干扰滚动逻辑
::after 伪元素清除必须写全三要素
只写 .parent::after { clear: both; } 是无效的。伪元素要真正撑开父容器高度，必须同时满足：
-
content: ""—— 缺失则伪元素不渲染 -
display: block—— 不能用inline或flex，否则clear不生效 -
clear: both—— 只清left或right在混合浮动场景下会漏掉一侧
完整写法：
.parent::after { content: ""; display: block; clear: both; }注意：这个规则必须直接作用于父容器选择器本身，不能套在子元素或 wrapper 上。
别碰 overflow: hidden 这个“快捷键”
overflow: hidden 虽然能快速触发 BFC 让 padding 显形，但副作用太具体：
- 绝对定位子元素（如弹出菜单、气泡提示）超出父容器时会被硬裁剪
- 某些动画或 transform 偏移内容也可能被截断
- 在 Safari 中，
overflow: auto有时会意外显示滚动条，而hidden则彻底隐藏——你无法控制它“该裁还是不该裁”
如果父容器本身设计上就不该有溢出内容（比如卡片、导航栏），那它可用；但只要存在任何“可能外溢”的交互逻辑，就该换 flow-root 或伪元素方案。
真正容易被忽略的是：浮动布局本身已是过时模式。哪怕只是临时修复，也建议顺手把 float: left 改成 display: flex，删掉所有清除逻辑——padding 会立刻生效，而且不再需要记住这些清除规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
