display: flow-root 是最轻量、副作用最小的解法，它显式创建 BFC 隔离父子 margin 折叠，兼容现代浏览器，无裁剪风险，且必须直接作用于参与折叠的父元素。
直接加 display: flow-root 到触发折叠的父容器上，是最轻量、副作用最小的解法。别绕弯子试 overflow: hidden 或 padding，除非你明确需要它们附带的行为。
为什么子元素的 margin-top 会让父容器整体下移
这不是渲染 bug，而是 CSS 规范定义的父子 margin 折叠行为：当父元素没有 border-top、没有 padding-top、overflow 是默认 visible，且子元素是第一个块级子项时，它的 margin-top 就会和父元素的外边距合并，视觉上表现为整块“掉下来”。
- 常见于卡片容器、文章段落包裹层、表单分组等场景
-
position: relative或transform无法阻止——它们不创建 BFC - 给子元素加
padding-top是无效的，问题出在父级与子级之间的隔离缺失
用 display: flow-root 隔离父子折叠最稳妥
它显式创建一个 BFC（块级格式化上下文），把父容器变成一个独立渲染区域，子元素的 margin-top 就只在内部生效，不再向上穿透。
- 兼容性：Chrome 64+ / Firefox 58+ / Safari 15.4+；旧版 Safari 可 fallback：
display: flow-root; overflow: hidden; - 无裁剪风险：
overflow: hidden会截断box-shadow、下拉菜单、绝对定位子项；flow-root不会 - 必须加在“参与折叠链”的父元素自身上，包一层 wrapper 再设
flow-root没用
兄弟元素间 margin-bottom 和 margin-top 同时设等于白忙活
两个相邻块级元素，一个设 margin-bottom: 20px，另一个设 margin-top: 30px，实际间距永远是 30px——这是垂直 margin 合并的必然结果。
立即学习“前端免费学习笔记（深入）”；
- 真正可控的做法是统一用单向 margin：
margin-bottom+:last-child { margin-bottom: 0 } - 动态列表、评论流等场景优先用
gap：display: flex; flex-direction: column; gap: 20px -
gap不受 margin 折叠影响，且能自动跳过隐藏子项，比手动控制margin更健壮
容易被忽略的是：BFC 隔离只作用于当前层级。父容器加了 flow-root，能阻断它和第一个子元素的折叠，但子元素之间如果仍是普通流块级、紧挨着、没 border/padding，照样会发生兄弟折叠——得逐层判断，不能指望一层解决所有嵌套问题。
