加 border 是为阻止外边距折叠，因 CSS 规范要求分隔层存在；display: flow-root 才是现代推荐的无副作用 BFC 创建方案。
加 border 是因为 CSS 规范强制要求“分隔层”存在
子元素的 margin-top “跑出”父元素，不是 bug，而是 CSS 明确规定的外边距折叠（margin collapsing）行为。它只在特定条件下发生：父元素没有 border、没有 padding、没有内容（空或仅空白符）、且未形成 BFC。只要其中任意一项被满足，折叠就中断——border 就是最直接的“物理分隔层”。
border 必须满足“存在且渲染”才算数
很多同学写了 border: none 或 border-width: 0，结果没用，就是因为这些写法不构成规范意义上的“border”。关键点是：
-
border-top: 1px solid transparent有效——宽度 > 0 且真实参与渲染 -
border: 1px solid rgba(0,0,0,0)也有效，但注意某些旧版 WebView 对全透明色支持不稳定 -
border: 0或border-style: none无效——浏览器认为“不存在 border” - 只需加对应方向的 border：
margin-top溢出，加border-top就够；margin-bottom溢出，加border-bottom
加 border 的副作用比想象中多
它看似简单，但容易忽略盒模型和视觉一致性问题：
- 若父元素设了
width: 100%但没加box-sizing: border-box，加border后会撑破容器宽度 -
border-radius和背景渐变可能因新增 border 而出现意外描边或颜色叠加 - Tailwind 用户要注意：
border-transparent在 purge 阶段可能被误删，导致线上失效 - 如果父元素本身是 flex 容器或 grid 容器，它默认已是 BFC，此时加
border纯属冗余
真正该优先考虑的是 display: flow-root
比起用 border “骗过”规范，现代项目更推荐语义清晰、零副作用的解法：
立即学习“前端免费学习笔记（深入）”；
-
display: flow-root是专为创建 BFC 设计的值，Chrome 64+、Firefox 59+、Safari 15.4+ 全支持 - 它不改变尺寸、不裁剪内容、不引入滚动条，也不会干扰
border-radius或背景 - 写法极简：
.parent { display: flow-root; }，一行解决，且可读性强 - 兼容性底线明确：IE 不支持，但 2026 年绝大多数生产环境已无需保 IE
加 border 能用，但它是“绕开问题”的方案；而 display: flow-root 是“正面对应问题”的方案——后者才是你下次遇到 margin 溢出时，该第一反应写出的代码。
