外边距折叠是css规范行为，非bug；display: flow-root是最推荐的解决方式，它明确创建bfc且无副作用；overflow:hidden虽有效但可能隐藏内容，padding则影响盒模型尺寸。
子元素的 margin-top 或 margin-bottom “跑”到父元素上，不是 bug，是 CSS 规范定义的外边距折叠（margin collapsing）行为。只要父元素没形成新的 BFC（Block Formatting Context），且没有 border、padding、content（非空）撑开上下边界，这种折叠就必然发生。
为什么 overflow: hidden 能解决，但不能乱用
因为 overflow 值为 hidden、auto、scroll 时，会强制父元素创建新的 BFC，从而隔离子元素的外边距，阻止其与父元素边界折叠。
-
overflow: visible（默认值）完全无效，它不触发 BFC -
overflow: clip理论上也触发 BFC，但 Safari 15.4+ 才支持，兼容性差于hidden -
overflow-x: hidden; overflow-y: visible在部分浏览器中会意外触发 BFC，但行为不统一，别依赖 - 如果父元素本身是
position: fixed或absolute，overflow可能不生效——脱离文档流后，BFC 触发逻辑变复杂
padding-top 看似简单，实际影响布局尺寸
给父元素加 padding-top: 1px 是最直觉的解法，但它会真实增加父元素的盒模型高度（除非你用 box-sizing: border-box 把 padding 算进 width/height 里）。
- 若父元素高度写死（如
height: 200px），加padding-top会导致内容被压缩或溢出 - 若父元素靠子元素撑高，加
padding会让整体高度无意义增加 1px —— 对像素级对齐敏感的 UI 就容易露馅 - 它只是“骗过”折叠条件，并未真正解决 BFC 缺失问题，属于治标不治本
更干净的替代：用 display: flow-root
这是现代标准下最推荐的解法：display: flow-root 明确创建一个 BFC，且不改变盒模型尺寸、不裁剪内容、不引入滚动条。
- 兼容性：Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+；IE 完全不支持
- 对比
overflow: hidden，它不会隐藏溢出内容，也不会因内容变化意外出现滚动条 - 对比
padding或border，它不增加任何视觉或尺寸副作用 - 写法简洁：
.parent { display: flow-root; }，一行搞定
真正容易被忽略的是：外边距折叠只发生在同一 BFC 内。如果你的父元素已经处于某个浮动容器、绝对定位上下文或 flex/grid 容器中，它的 BFC 状态可能已被间接影响——这时候单靠加 overflow 可能失效，得先确认父元素是否真的处在“标准块级上下文”里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
