HTML嵌套塌陷本质是块级元素垂直margin合并，非嵌套错误；典型表现为子元素margin-top穿透无border/padding/overflow的父容器；可用overflow:hidden触发BFC、flex/grid布局或改用padding解决。
HTML 嵌套塌陷的本质是块级元素的 margin 合并
塌陷不是“嵌套错了”，而是 margin-top 或 margin-bottom 在父子或相邻块级元素间发生了合并（margin collapse）。最典型场景：父容器没设 border、padding、overflow，子元素的上外边距直接“穿透”到父容器外部。
常见现象：div 里套一个 h2，h2 设了 margin-top: 20px，结果整个父 div 被顶下来 20px，而不是在内部留白。
- 触发条件：两个垂直相邻的块级盒（父子或兄弟），且都处于常规文档流、没有清除、没有隔离（如
border/padding） - 只影响
margin-top和margin-bottom，margin-left/margin-right不塌陷 - 浮动、绝对定位、
inline-block、flex或grid容器内的子项不会触发塌陷
用 overflow: hidden 或 auto 快速止塌
给父容器加 overflow: hidden 是最轻量、兼容性最好的防塌方案——它会为父元素创建一个新的 BFC（块级格式化上下文），从而隔离内外 margin。
示例：
立即学习“前端免费学习笔记（深入）”；
<div class="card"> <h2>标题</h2> <p>内容</p> </div>
CSS：
.card {
overflow: hidden; /* 关键：触发 BFC */
}
.card h2 {
margin-top: 24px; /* 不再塌出去 */
}- 比加
padding: 0.1px更语义清晰，比加border: 1px solid transparent更省事 - 注意：若父容器本就需显示溢出内容（如横向滚动），改用
overflow: auto或换其他 BFC 触发方式 - IE6/7 不支持
overflow创建 BFC，但这类老环境现在基本可忽略
Flex/Grid 布局天然规避塌陷
当父容器设为 display: flex 或 display: grid，其子项默认不参与常规文档流的 margin 合并逻辑，塌陷自动消失。
- 适合现代布局：卡片、导航栏、表单组等有明确结构关系的嵌套
- 注意
flex下子项的margin仍生效，但不再和父容器“合并”，而是严格作用于自身盒模型 - 若只需防塌又不想改整体布局，不必强上 Flex；但新项目中优先用 Flex/Grid 替代纯块级嵌套，更可控
慎用 margin-top 代替内边距
很多塌陷问题其实源于“想撑开内部空间却写了 margin-top”。比如给卡片首行文字加顶部间距，正确做法是给父容器设 padding-top，而非给子元素设 margin-top。
-
padding属于盒自身，不会触发塌陷；margin属于盒与外部的关系，易受上下文影响 - 视觉效果相同时，
padding更稳定、更易维护，也更符合“内容区留白”的语义 - 当必须用
margin（如标题与上文的节奏分隔），确保它发生在同级元素之间，而非父子嵌套中
BFC 的触发方式不止一种，但实际开发中真正需要记的只有两三个：加 overflow、切 flex、或者老老实实用 padding。塌陷本身不难解，难的是习惯性把“看起来有空隙”等同于“该用 margin”。
