子元素的margin-top“消失”是css规范定义的垂直外边距塌陷行为：当父容器无border、padding、内容且未触发bfc时，子元素margin-top与父容器上边缘合并取大值，导致父容器整体下移；最稳解法是加border-top:1px solid transparent，兼容性好且无副作用。
为什么子元素的 margin-top 会“消失”
这不是 bug，是 CSS 规范明确规定的垂直外边距塌陷（margin collapse）：当父容器没有 border、padding、内容或 BFC 触发条件时，子元素的 margin-top 会和父容器的上边缘合并，取两者中较大值。结果就是——子元素没下移，整个父容器却往下跑了。
给父容器加 border-top: 1px solid transparent 最稳
这是兼容性最好、副作用最小的解法。透明边框不改变视觉，但能立刻打断塌陷条件，连 IE8 都支持。
-
box-sizing: border-box全局启用时，border不会额外撑宽容器宽度，放心用 - 别用
outline替代——它不参与布局，也不触发 BFC，完全无效 - 如果父容器已有
border但塌陷还在，检查是否设成了border: none或border-top: 0，必须是“非 none”才生效
用 display: flow-root 更语义化，但得看浏览器支持
这是专为创建 BFC 设计的 display 值，比 overflow: hidden 干净得多——不裁剪溢出内容，不影响滚动或定位元素。
- Chrome 64+ / Firefox 58+ / Safari 15.4+ 支持；旧版可用
@supports降级到overflow: hidden - Flex/Grid 容器本身已是 BFC，但一旦你手动设回
display: block，塌陷立刻回归 - 注意：
flow-root会重置某些继承行为（比如font-size的相对计算），调试时留意 computed 样式变化
别碰 overflow: hidden，除非你确认不需要溢出
它靠触发 BFC “隔离”内外 margin，但副作用太实在：下拉菜单、阴影、position: absolute 子元素可能被截断，移动端 Safari 还偶发滚动卡顿。
- 如果父容器本就要滚动，改用
overflow: clip（现代浏览器支持更好，语义更准） -
overflow: auto虽也触发 BFC，但可能意外出现滚动条，尤其在动态内容高度变化时 - 临时调试可加
background或border快速验证是否真为塌陷——看到子元素顶着父容器顶部，基本就坐实了
inline-block、Flex/Grid 子项都不会塌陷——但它们的子元素之间仍可能塌陷。改布局方式时，别默认以为“加了 margin 就一定有效”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
