外边距穿透是css规范定义的margin塌陷行为：当父元素无border、padding、内容且未触发bfc时，首个子元素的margin-top会与其上边界合并，导致父元素视觉下移；加border-top或padding-top可物理分隔并阻断该行为。
什么是外边距穿透（margin-top 传递到父元素）
这不是 bug，是 CSS 规范定义的行为：当父元素没有 border、padding、内联内容，且未创建 BFC 时，第一个子元素的 margin-top 会“穿透”父元素顶部边界，导致父元素整体下移——看起来像父元素自己有了上边距，实际是子元素的 margin 在起作用。
典型现象：div.parent 没设任何样式，里面一个 div.child { margin-top: 20px; }，结果整个 .parent 离页面顶部多出 20px，但检查其 computed style 会发现 margin-top: 0。
为什么加 border 或 padding 能截断穿透
关键在「分隔物」（separator）：CSS 规定，只有当父子之间存在 border、padding、内联内容、或 BFC 边界时，子元素的 margin 才不会与父元素的“默认边界”合并。
-
border-top: 1px solid transparent有效——宽度 > 0 且真实渲染，哪怕颜色透明 -
padding-top: 1px有效——哪怕极小，也构成物理分隔 -
border: none或border-width: 0无效——不满足“存在”条件 - 只需加在对应方向即可：仅防
margin-top穿透，加border-top或padding-top就够
实际写法中容易踩的坑
看似简单，但几个细节常被忽略：
- 用了
border后，若父元素有width: 100%且未设box-sizing: border-box，总宽度会超 100% —— 必须补上box-sizing: border-box -
padding会撑大父元素内部可用空间，如果子元素依赖height: 100%，可能高度计算失准 - Tailwind 用户注意：
border-transparent在 purge 阶段可能被误删，导致线上失效 - 如果父元素已有背景渐变或
border-radius，加border会叠加描边，视觉上可能多出一条线（尤其高对比度模式下）
比 border/padding 更现代的替代方案
如果你能控制兼容性范围（Chrome 58+/Firefox 34+），display: flow-root 是更干净的选择：
- 它创建 BFC，天然阻止 margin 穿透，且不改变盒尺寸、不干扰
border-radius或阴影 - 不像
overflow: hidden，不会意外裁剪子元素的position: absolute内容或box-shadow - 语义清晰：明确表达“这个容器要独立管理内部流布局”，而非靠“加个看不见的边框”来凑效果
真正要注意的不是选哪个方案，而是确认你加的 border 或 padding 是否被后续样式逻辑隐式依赖——比如某个 JS 插件读取 offsetHeight，或者动画依赖精确的盒模型尺寸。这些地方不报错，但表现会悄悄偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
