如何解决CSS父子元素margin折叠问题

子元素的 margin-top 没生效是因父子 margin 折叠：父容器无 border-top/padding-top、未触发 BFC 且子元素为普通流块级元素时，二者上边距合并；推荐用 display: flow-root 触发 BFC 根治，兼容现代浏览器，无副作用。

子元素的 margin-top 没生效，反而把整个父容器往下推了——这不是 bug，是 CSS 规范定义的父子 margin 折叠行为；根治关键在于让父容器“拦住”子元素的 margin，而不是去改子元素本身。

为什么 margin-top 会穿透父容器？

当父容器满足以下全部条件时，第一个子元素的 margin-top 就会和父容器自身的上边距合并（取较大值），结果是父容器整体下移：

1. 父容器没有 border-top、padding-top 或任何内容（包括空格、换行）
2. 父容器未触发 BFC（块级格式化上下文）
3. 子元素是块级且处于普通流中（非 float、非 position: absolute、非 flex item）

开发者工具里看 computed styles，你会发现父容器的 margin-top 值直接等于子元素设的值——这就是折叠发生的铁证。

用 display: flow-root 触发 BFC（推荐）

这是现代项目最干净的解法：不裁剪溢出内容、不改变盒尺寸、语义明确、无副作用。

1. 只需给父容器加一行：display: flow-root
2. Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 全支持
3. 比 overflow: hidden 安全：不会隐藏 position: absolute 子元素、阴影或下拉菜单
4. 别写 overflow: clip——某些 CSS-in-JS 库会自动转成它，而它不触发 BFC

兼容老浏览器的轻量 fallback

若需支持 IE11 或旧版 Safari，优先选不影响布局计算的方案：

1. border-top: 1px solid transparent：关键是“非零边框”，颜色无关紧要
2. 或更轻量的 padding-top: 0.1px：在 box-sizing: border-box 下完全不增加高度
3. 避免写 border: 0 或 border: none——它们不满足“存在边框”条件，无法阻断折叠
4. 如果父容器已有 border 却仍折叠，大概率被 reset.css 清掉了，检查 computed styles 确认

别踩这些坑

很多尝试看似合理，实则无效或引入新问题：

1. 只给子元素加 display: inline-block：能阻止折叠，但会破坏块级流语义，可能影响垂直对齐或换行
2. 在子元素外再套一层 div 并设 flow-root：BFC 必须由“参与折叠的父容器自身”触发，外包无效
3. 用 margin-top + padding-top 混用：容易误判最终间距来源，像素敏感场景难对齐
4. 依赖 flex 但忘了加 flex-direction: column：默认是 row，子元素横向排列，margin-top 变成无效方向

真正难察觉的是“静默位移”——它不产生可见空白，却让整块布局错位几像素，尤其在嵌套卡片或表单区块里，这种偏移常被当成设计稿误差忽略。