父容器下边界重合是因浮动导致高度塌陷，使padding虽存在却不可见；需用伪元素::after（content:"";display:block;clear:both）或display:flow-root触发BFC来修复。
父容器下边界重合是因为高度塌陷，不是padding没生效
给父容器写 padding-bottom: 20px 却看不到效果，不是 CSS 写错了，而是浮动子元素脱离文档流后，父容器计算出的高度是 0px——此时 padding 确实存在，但“撑”在一个看不见的盒子里，视觉上完全不可见。
常见错误现象：.wrapper 有 border: 1px solid #ccc 和 padding: 20px，里面两个 float: left 的卡片，结果边框上下紧贴、背景色只有一条线、后续内容直接顶上来。
- 别用
min-height临时顶替：它不解决塌陷根源，且响应式断点下容易露馅 - 别在子元素上加
margin-bottom试图“推开”下文：浮动+外边距合并（margin collapse）会让这个值失效或被吞掉 - 如果父容器本身是
inline或display: inline-block，加padding更大概率没反应——先得让它变成块级容器
伪元素 + clear:both 是让 padding 生效的前提
单纯加伪元素不等于解决问题；必须确保伪元素能真正“撑开”父容器高度，padding 才有地方可作用。
推荐写法：.wrapper::after 必须同时满足三个条件：内容为空、显示为块级、清除两侧浮动。
-
content: ""—— 缺失则伪元素不渲染 -
display: block（不能用inline或flex）—— 否则clear不生效 -
clear: both—— 只清left或right无法应对混合浮动场景
完整示例：
.wrapper {
padding: 20px;
}
.wrapper::after {
content: "";
display: block;
clear: both;
}
注意：::after 必须作用于父容器本身，而不是某个子元素；如果父容器已设 overflow: hidden，伪元素仍会渲染，但可能被裁剪——此时要优先删掉 overflow 改用 BFC 方案。
display: flow-root 比 overflow:hidden 更安全地激活 padding
想让 padding 稳定生效，又不想冒内容被裁剪的风险？display: flow-root 是现代项目首选。
它和 overflow: hidden 一样能触发 BFC，使父容器重新包裹浮动子元素、恢复真实高度，从而让 padding 可见。但关键区别在于：flow-root 不改变溢出行为，下拉菜单、阴影、绝对定位子元素全都不受影响。
-
overflow: hidden在子元素有box-shadow延展或transform: translateY(-10px)时，极易意外裁剪 -
display: flow-root兼容性已覆盖 Chrome 64+/Firefox 58+/Safari 15.4+，IE 不支持但本就不该用于新项目 - 如果必须兼容旧 Safari（overflow: clip 替代，但需确认运行环境
一行解决：
.wrapper {
display: flow-root;
padding: 20px;
}
用 padding 替代 margin 才能绕过外边距合并
父容器下边界“重合”，有时表面是塌陷，实际是父子间 margin-bottom 发生了外边距合并（margin collapse）——比如子元素写了 margin-bottom: 30px，父容器也写了 margin-bottom: 20px，最终只保留 30px，且这个值还可能被上层容器吃掉。
这时把逻辑从“推远下文”转为“内缩内容”，就能稳住间距：
- 把子元素的
margin-bottom: 30px删掉 - 给父容器加
padding-bottom: 30px—— 它属于盒模型内部，不参与 collapse - 若父容器已有背景色或边框，这个
padding会自然撑开空间，视觉等效于“留白”
特别提醒：如果父容器设置了 overflow: hidden 且内部有绝对定位元素向下偏移，padding-bottom 依然有效，但那个绝对定位元素可能被裁掉——问题不在 padding，而在 overflow 的副作用被忽略了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
