父元素被子元素margin-top顶开是外边距合并的正常行为，即当父元素无border-top、padding-top且未触发BFC时，子元素margin-top与父元素上边界合并，导致父元素下移；display: flow-root是最优解，它创建BFC且无副作用。
父元素被子元素margin-top顶开是外边距合并的正常行为
这不是 bug，是 CSS 规范明确定义的外边距合并（Margin Collapse）：当父元素没有 border-top、padding-top，且未触发 BFC 时，第一个子元素的 margin-top 会直接和父元素的上边界合并——浏览器把它算在父元素“外面”，导致父元素整体下移，但自身高度不变。
常见表现包括：div 看起来悬空、顶部留白远大于预期、父元素 Computed 面板里 margin-top 值异常（比如写了 20px 却显示 0），而空白却真实存在。
用 display: flow-root 阻断最干净
这是专为解决此问题设计的值，现代浏览器（Chrome 64+ / Firefox 59+ / Safari 15.4+ / Edge 79+）已稳定支持，语义清晰、无副作用。
-
display: flow-root会创建 BFC，彻底隔离父子间外边距合并 - 不裁剪
box-shadow、不干扰position: absolute子项、不改变盒模型尺寸 - 比
overflow: hidden更安全——后者可能意外隐藏下拉菜单、Tooltip 或横向滚动内容 - 写法极简：
.parent { display: flow-root; }
overflow: hidden 能用但有风险
它确实能触发 BFC，从而阻止合并，但本质是靠渲染隔离，不是“隐藏多余部分”。
立即学习“前端免费学习笔记（深入）”；
- 如果父元素内有
position: absolute元素超出边界、长文本需横向滚动、或依赖box-shadow扩展视觉范围，会被裁剪 -
overflow: auto在高 DPI 屏幕或缩放时可能无故出现滚动条 - 若父元素本身是
inline或inline-block（如span包裹），overflow不生效 → 必须先加display: block - IE 完全不支持
flow-root，此时可降级为overflow: hidden，但需确认无溢出内容
别用 padding-top 或 border-top “打补丁”
它们物理隔开父子边界，确实能阻断合并，但属于语义错位的权宜之计。
-
padding-top: 1px会增加父元素高度，影响height: 100%或背景覆盖范围 -
border-top: 1px solid transparent占用盒模型空间，box-sizing混用时高度难预测 - 两者都违背设计意图：你不是要加内边距或边框，只是想关掉合并逻辑
- 真正需要间距时，优先考虑布局层方案，比如
display: flex+gap
真正容易被忽略的点是：这个现象只发生在普通文档流的块级元素之间，且仅限垂直方向；margin-left/margin-right 永远不会合并。一旦父容器改用 display: flex 或 display: grid，问题天然消失——因为 Flex/Grid 的间距机制（gap）根本不参与外边距合并流程。
