HTML嵌套塌陷本质是块级元素垂直margin合并，非嵌套错误；典型表现为子元素margin-top穿透无border/padding/overflow的父容器；可用overflow:hidden触发BFC、flex/grid布局或改用padding解决。
HTML 嵌套塌陷的本质是块级元素的 margin 合并
塌陷不是“嵌套错了”，而是
或
在父子或相邻块级元素间发生了合并（margin collapse）。最典型场景：父容器没设
、
、
，子元素的上外边距直接“穿透”到父容器外部。
常见现象：
里套一个
，
设了
，结果整个父
被顶下来 20px，而不是在内部留白。
触发条件：两个垂直相邻的块级盒（父子或兄弟），且都处于常规文档流、没有清除、没有隔离（如
/
）
只影响
和
，
/
不塌陷
浮动、
绝对定位
、
、
或
容器内的子项不会触发塌陷
用
或
快速止塌
给父容器加
是最轻量、兼容性最好的防塌方案——它会为父元素创建一个新的 BFC（块级格式化上下文），从而隔离内外 margin。
示例：
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
CSS：
比加
更语义清晰，比加
更省事
注意：若父容器本就需显示溢出内容（如横向滚动），改用
或换其他 BFC 触发方式
IE6/7 不支持
创建 BFC，但这类老环境现在基本可忽略
Flex/Grid 布局天然规避塌陷
当父容器设为
或
，其子项默认不参与常规文档流的 margin 合并逻辑，塌陷自动消失。
适合现代布局：卡片、导航栏、表单组等有明确结构关系的嵌套
注意
下子项的
仍生效，但不再和父容器“合并”，而是严格作用于自身盒模型
若只需防塌又不想改整体布局，不必强上 Flex；但新项目中优先用 Flex/Grid 替代纯块级嵌套，更可控
慎用
代替内边距
很多塌陷问题其实源于“想撑开内部空间却写了
”。比如给卡片首行文字加顶部间距，正确做法是给父容器设
，而非给子元素设
。
属于盒自身，不会触发塌陷；
属于盒与外部的关系，易受上下文影响
视觉效果相同时，
更稳定、更易维护，也更符合“内容区留白”的语义
当必须用
（如标题与上文的节奏分隔），确保它发生在同级元素之间，而非父子嵌套中
BFC 的触发方式不止一种，但实际开发中真正需要记的只有两三个：加
、切
、或者老老实实用
。塌陷本身不难解，难的是习惯性把“看起来有空隙”等同于“该用 margin”。
margin-topmargin-bottomborderpaddingoverflowdivh2h2margin-top: 20pxdivborderpaddingmargin-topmargin-bottommargin-leftmargin-rightinline-blockflexgridoverflow: hiddenautooverflow: hidden
标题
内容
.card {
overflow: hidden; /* 关键：触发 BFC */
}
.card h2 {
margin-top: 24px; /* 不再塌出去 */
}padding: 0.1pxborder: 1px solid transparentoverflow: autooverflowdisplay: flexdisplay: gridflexmarginmargin-topmargin-toppadding-topmargin-toppaddingmarginpaddingmarginoverflowflexpadding