应优先在父容器上使用 display: flow-root 或 padding-top: 0.1px 解决父子塌陷，避免 overflow: hidden 的裁剪副作用；兄弟塌陷宜用单边距或 gap 控制，而非强行修复。
直接给父容器加 display: flow-root 或 padding-top: 0.1px，比 overflow: hidden 更安全、副作用更小；兄弟元素间塌陷优先统一用单边距（如只设 margin-bottom），而不是靠“修”。
为什么 overflow: hidden 能止住塌陷却常出问题
它强制父容器创建 BFC，从而隔离子元素的 margin-top，阻止父子合并。但副作用真实且高频：
-
overflow: hidden会裁剪所有溢出内容，包括position: absolute的下拉菜单、Tooltip、弹层、阴影（box-shadow） - 在高 DPI 屏或缩放场景下，
overflow: auto可能无故出现滚动条 - 它不解决兄弟元素间的塌陷，只对父子结构“临时遮羞”
- 一旦后续加了
transform或will-change，BFC 行为可能被覆盖，塌陷复现
父子塌陷该在哪一层加修复？
必须加在“参与合并”的那个父容器自身上，不是子元素、也不是外层 wrapper。常见误操作是套个新 div 再设 display: flow-root，结果没用——因为塌陷发生在原父容器和它的第一个子元素之间，新 wrapper 并未介入这个合并链。
正确写法示例：
.card {
display: flow-root; /* ✅ 加在这里 */
}
.card > .title {
margin-top: 24px; /* 子元素照常写 */
}
如果父容器已有 border 或 padding，塌陷本就不会发生；若不能动父容器样式，padding-top: 0.1px 是最轻量的补丁，视觉不可见，全浏览器兼容，且不干扰任何定位逻辑。
兄弟元素塌陷要不要“解决”？
多数时候不用主动干预。段落 p、标题 h2、列表项默认用 margin 控制间距，塌陷反而是排版一致性的保障。强行“修复”反而导致语义混乱。
真要避免（比如两个卡片组件拼接），推荐以下做法：
- 统一只用
margin-bottom，最后一个元素设margin-bottom: 0 - 改用
gap：把父容器设为display: flex; flex-direction: column; gap: 24px，gap不塌陷、支持响应式单位（如clamp(12px, 2vw, 24px)） - 避免给相邻块同时设
margin-top和margin-bottom—— 这是源头设计问题，不是样式 bug
真正容易被忽略的是：塌陷往往成片出现。修好一个父子结构后，发现相邻兄弟容器又错位了，大概率是它们之间也发生了兄弟塌陷；或者父容器本身是另一个更大容器的子元素，它的 margin-top 又和上层合并了。调试时得顺着盒模型一层层往上查，看哪一级“没挡牢”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
