div嵌套无语法限制，但易致语义缺失、CSS作用域失控或盒模型理解偏差；应避免泛化class名、控制嵌套层级、用语义化标签替代、显式限定CSS作用域、处理margin折叠、警惕flex/grid中冗余包裹层。
HTML 中 div 嵌套本身没有语法限制，但实际布局出问题，几乎全是语义缺失、CSS 作用域失控或盒模型理解偏差导致的。
div 套 div 时 class 命名混乱直接导致样式覆盖失效
常见现象：内层 div 的样式没生效，审查元素发现被外层同名 class 覆盖；或者改了一个地方，多个区域意外联动。
- 避免用泛化名如
box、wrap、content单独作为 class，必须带上下文前缀，例如user-card__header、product-list__item - 嵌套层级超过 3 层（
div > div > div > div）时，优先考虑是否该用语义化标签（article、section、nav）替代纯div - 用 CSS 的
&符号（在 Sass/Less 中）或子选择器>显式限定作用范围，比如.modal > .modal-body > .form-group
margin 折叠让 div 套 div 后间距消失或翻倍
两个相邻 div 的垂直 margin 会合并，嵌套时外层 div 的 margin-top 和内层第一个子 div 的 margin-top 也可能折叠 —— 这是 HTML 盒模型默认行为，不是 bug。
- 临时解决：给外层
div加overflow: hidden或padding: 0.1px阻断折叠 - 长期方案：统一用
padding控制内部间距，外部间距交给父容器处理；或启用display: flow-root（兼容性 OK，Chrome 64+/Firefox 58+） - 检查工具：在 Chrome DevTools 的 Layout 面板中勾选 “Show layout shifts” 和 “Show padding/margin”，直观看到折叠发生位置
flex 或 grid 容器里嵌套 div 不起作用？可能是 display 覆盖了
当父 div 设了 display: flex，它的直接子元素才成为 flex item；如果中间多套了一层 div，那这层就变成 item，而你真正想排布的元素成了“item 的子元素”，不再受 flex 控制。
立即学习“前端免费学习笔记（深入）”；
- 典型错误写法：
.target不参与 flex 排列 - 修复方式：删掉冗余包裹层，或把
display: flex移到更内层容器上 - 调试技巧：在 DevTools 中选中目标元素，看右侧面板的 “Computed” 标签页里
display最终值是否符合预期；若显示block，说明被某条规则重置了
嵌套本身很简单，难的是每次加一层 div 都得问一句：这一层有没有语义？有没有被 CSS 意外接管？有没有让后续维护者多猜三层 DOM 结构？
