父元素padding“失效”实为高度塌陷导致的视觉错觉，因浮动子元素脱离文档流使父容器computed height为0px；display: flow-root创建BFC可强制包含浮动子元素并完整尊重padding，是现代首选方案。
父元素padding“失效”其实是高度塌陷的视觉错觉
写了 padding: 20px 却看不到留白，不是 CSS 忽略了你的声明，而是父元素的 computed height 是 0px —— 浮动子元素脱离文档流后，父容器根本“看不见”它们，自然算不出高度。padding 确实存在，但它被撑在一个视觉上不存在的盒子里，所以背景、边框、阴影全跟着消失，留白也毫无意义。
display: flow-root 是现代项目首选解法
给父元素加 display: flow-root，它会创建新的 BFC（块级格式化上下文），强制包含所有浮动子元素，同时完整尊重 padding、border 和 background。它不裁剪下拉菜单、tooltip、投影或绝对定位内容，语义准确且无副作用。
- Chrome 64+ / Firefox 62+ / Edge 79+ / Safari 15.4+ 原生支持
- IE 完全不支持，可用
@supports not (display: flow-root)回退 - 不要和
overflow: hidden叠加使用，可能引发渲染冲突 - 如果父元素已是
display: flex或display: grid，浮动本身已被忽略，加flow-root无效
::after 伪元素清除必须三要素齐全
只写 .parent::after { clear: both; } 是无效的——伪元素必须真正渲染并参与布局才能撑开高度。
-
content: ""缺失 → 伪元素不生成 → 清除动作不存在 -
display: block或display: table必须显式声明；inline下clear不生效 -
clear: both要写在父容器的伪元素上，且选择器必须直接作用于该父容器 - 兼容 IE8 需写成
.parent:after, .parent::after，并加zoom: 1（IE6/7）
overflow: hidden 能用但风险明确
它靠触发 BFC 撑开父容器，确实能让 padding 显形，但代价是无声裁剪所有溢出内容。
立即学习“前端免费学习笔记（深入）”；
- 下拉菜单、tooltip、绝对定位弹层、阴影外延、横向滚动区域，全会被截断
-
overflow: auto在 Safari 中可能无故出现滚动条 - 语义错位：你本意是“包裹浮动”，却写了“隐藏溢出”，后期维护易误解
- 若父容器已有
transform或will-change，可能因层叠上下文冲突导致清除失效
box-sizing 或改子元素 margin，却没意识到问题根子在父容器是否参与了布局计算。 
