子元素 margin 会让父元素“被撑开”是因 margin 塌陷：子元素垂直外边距与父元素边界合并；触发 BFC（如 display: flow-root）可彻底解决，语义清晰且无副作用。
子元素 margin 为什么会让父元素“被撑开”
这是经典的 margin 塌陷（margin collapse）现象：当子元素设置了 margin-top 或 margin-bottom，且父元素没有 border、padding、inline content 等“隔离层”时，子元素的外边距会直接作用到父元素的盒边界上，看起来像父元素也被顶开或拉高了。
本质不是“影响”，而是浏览器按规范把两个相邻块级盒的垂直 margin 合并为一个——父元素的 margin-bottom 和子元素的 margin-top 可能合并，或者父元素“无内容高度”时，子元素的 margin-top 直接“穿透”出来。
建立 BFC 是最直接的解决方式
BFC（Block Formatting Context）是一个独立的渲染区域，内部的布局不会影响外部，且 BFC 容器不会和外部的块级元素发生 margin 塌陷。只要让父元素触发 BFC，子元素的 margin 就再也不会“漏出去”。
常用触发方式（任选其一即可）：
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden（最常用，但注意会裁剪溢出内容） -
display: flow-root（推荐，专为此设计，无副作用） -
float: left或right（不推荐，会脱离文档流） -
position: absolute或fixed（同样脱离流，慎用） -
contain: layout（现代方案，兼容性稍弱）
例如：
.parent { display: flow-root; }
.child { margin-top: 20px; }此时 .child 的 margin-top 只在 BFC 内部起作用，.parent 高度不再被它“撑开”。
为什么不用 padding 或 border？
加 padding-top: 1px 或 border-top: 1px solid transparent 确实也能阻止塌陷，但属于“打补丁”式修复：
- 引入了本不需要的视觉占位（哪怕透明 border 也占用盒模型空间）
- 可能干扰后续样式计算（比如
box-sizing混用时高度变难预测） - 语义不清：你并不是想加边框或内边距，只是想关掉塌陷
display: flow-root 是 CSS 规范中明确为“创建无副作用 BFC”而设的值，意图清晰、行为确定、无额外渲染成本。
兼容性与 fallback 要留意
display: flow-root 在 Chrome 65+、Firefox 58+、Safari 15.4+、Edge 79+ 支持良好；IE 完全不支持。
如果需兼容老版本 Safari 或 IE：
- 用
overflow: hidden作 fallback（加@supports判断更稳妥） - 避免在有滚动需求的容器上滥用
overflow: hidden，否则会意外截断内容 - 注意
flow-root不支持伪元素（::before/::after不会生成 BFC）
真正容易被忽略的是：BFC 不仅解决 margin 塌陷，还顺便清除了浮动影响——如果你同时用了 float 子元素，flow-root 会一并处理，无需额外 clear。
