子元素的 margin-top 没生效是因父子 margin 折叠：父容器无 border-top/padding-top、未触发 BFC 且子元素为普通流块级元素时，二者上边距合并；推荐用 display: flow-root 触发 BFC 根治，兼容现代浏览器，无副作用。
子元素的 margin-top 没生效，反而把整个父容器往下推了——这不是 bug，是 CSS 规范定义的父子 margin 折叠行为；根治关键在于让父容器“拦住”子元素的 margin，而不是去改子元素本身。
为什么 margin-top 会穿透父容器？
当父容器满足以下全部条件时，第一个子元素的 margin-top 就会和父容器自身的上边距合并（取较大值），结果是父容器整体下移：
- 父容器没有
border-top、padding-top或任何内容（包括空格、换行） - 父容器未触发 BFC（块级格式化上下文）
- 子元素是块级且处于普通流中（非
float、非position: absolute、非 flex item）
开发者工具里看 computed styles，你会发现父容器的 margin-top 值直接等于子元素设的值——这就是折叠发生的铁证。
用 display: flow-root 触发 BFC（推荐）
这是现代项目最干净的解法：不裁剪溢出内容、不改变盒尺寸、语义明确、无副作用。
立即学习“前端免费学习笔记（深入）”；
- 只需给父容器加一行：
display: flow-root - Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 全支持
- 比
overflow: hidden安全：不会隐藏position: absolute子元素、阴影或下拉菜单 - 别写
overflow: clip——某些 CSS-in-JS 库会自动转成它，而它不触发 BFC
兼容老浏览器的轻量 fallback
若需支持 IE11 或旧版 Safari，优先选不影响布局计算的方案：
-
border-top: 1px solid transparent：关键是“非零边框”，颜色无关紧要 - 或更轻量的
padding-top: 0.1px：在box-sizing: border-box下完全不增加高度 - 避免写
border: 0或border: none——它们不满足“存在边框”条件，无法阻断折叠 - 如果父容器已有
border却仍折叠，大概率被 reset.css 清掉了，检查 computed styles 确认
别踩这些坑
很多尝试看似合理，实则无效或引入新问题：
- 只给子元素加
display: inline-block：能阻止折叠，但会破坏块级流语义，可能影响垂直对齐或换行 - 在子元素外再套一层 div 并设
flow-root：BFC 必须由“参与折叠的父容器自身”触发，外包无效 - 用
margin-top+padding-top混用：容易误判最终间距来源，像素敏感场景难对齐 - 依赖
flex但忘了加flex-direction: column：默认是 row，子元素横向排列，margin-top变成无效方向
真正难察觉的是“静默位移”——它不产生可见空白，却让整块布局错位几像素，尤其在嵌套卡片或表单区块里，这种偏移常被当成设计稿误差忽略。
