margin外溢不是bug而是css规范定义的margin塌陷行为，需通过触发父元素bfc（如display:flow-root）来阻止；display:flow-root是专为此设计的无副作用方案，现代浏览器广泛支持。
子元素的 margin-top 或 margin-bottom “跑”到父元素外面，不是 bug，是 CSS 默认行为；要拦住它，得让父元素成为 BFC。
为什么 margin 会外溢？
当父元素没形成 BFC，且内部第一个子元素有 margin-top（或最后一个有 margin-bottom），这个 margin 就会“穿透”父容器，和父元素的上/下边界合并——这叫 margin 穿透（也称 margin 塌陷）。实际效果是：父元素没边距，但整体往下/往上跳了。
常见场景：
- 父
<div> 没设高度、没边框、没 padding，仅靠子元素撑高<li>子元素写了 <code>margin-top: 20px，结果整个父块一起下移 - 用
display: flex或grid外层布局时，内部块仍可能触发此问题（因 flex 容器本身是 BFC，但子元素若为普通块级，其 margin 仍可能与兄弟元素折叠） -
overflow: hidden—— 最常用，但注意：如果子元素真有溢出内容（比如长文本、绝对定位偏移），会被裁剪 -
overflow: auto—— 比hidden温和，只在必要时出现滚动条，兼容性好 -
display: flow-root—— 专为此设计的值，无任何副作用，现代浏览器全支持（Chrome 64+、Firefox 59+、Safari 15.4+），推荐新项目首选 -
float: left或right—— 有效但会让父元素脱离文档流，通常不适用 -
position: absolute/fixed—— 同样脱离流，仅适合模态框等特殊定位场景 -
display: inline-block—— 父元素变内联块后宽度收缩，需额外设width: 100%，且换行符会产生间隙 -
padding: 0.1px—— 能阻止外溢，但属于 hack，语义不清，维护成本高 -
border: 1px solid transparent—— 有效，但增加无意义的边框，影响 box-sizing 计算逻辑 - 只给子元素加
margin-top却忘了父元素是否 BFC —— 很多人以为“加了 margin 就该起效”，其实前提是父容器能承载它
哪些方式能快速让父元素变成 BFC？
只要满足任一条件，父元素就创建 BFC，从而包裹住子元素的 margin，阻止外溢。优先选语义清晰、副作用小的方案：
别踩这些坑
看似能“闭合”的写法，实际不一定生效：
用 flow-root 的最小可行示例
<div class="parent">
<div class="child">我有 margin-top</div>
</div>
<p>.parent {
display: flow-root; /<em> 关键：显式创建 BFC </em>/
}
.child {
margin-top: 30px;
}</p>
这段代码里，.child 的 margin-top 不再外溢，.parent 高度也如实包含该 margin —— 没滚动条、没浮动、没透明边框，干净利落。
真正容易被忽略的点是：flow-root 不改变盒模型类型（仍是块级），也不影响子元素布局方式，但它把“是否容纳 margin”这件事交还给了开发者控制；而老方案如 overflow: hidden，表面解决了问题，实则悄悄压制了潜在的溢出需求。
