标签禁止嵌套块级元素，因html规范限定其仅允许phrasing content（如、），否则浏览器会自动修正为...，导致dom膨胀、样式错乱、js查询失效。
<p></p> 标签本身不支持嵌套，所谓“<p></p> 嵌套层级太深”实际是误用或浏览器自动纠错导致的 DOM 膨胀——它根本不是合法结构，优化方向不是“压平层级”，而是**杜绝在 <p></p> 里写块级元素**。
为什么 <p></p> 里不能放 <div>、<code><h2></h2> 或 <ul></ul>
HTML 规范明确定义 <p></p> 的 Permitted content 只能是 phrasing content（行内内容），比如 <span></span>、<strong></strong>、<a></a>、<img>。一旦你写 <p></p>
<div>xxx</div>
<p></p>，生成：<p></p>
<div>xxx</div>
<p></p>
<ul>
<li>多出两个空 <code><p></p> 节点，增加内存和样式计算负担
offsetHeight 或监听 resize 可能读到错误节点常见误写场景及替换方案
这些写法看着“顺手”，实则埋雷：
-
<p></p> <div class="highlight">重点内容</div>→ 改用<div class="highlight"><p>重点内容</p></div>或直接给<p></p>加 class -
<p></p> <ul><li>列表项</li></ul>→<ul></ul>是块级容器，和<p></p>并列；需要段落说明？用<p></p>+<ul></ul>相邻，不要包 -
<p></p> <h3>小标题</h3>正文→<h3></h3>和<p></p>是同级语义单元，必须拆开；标题归标题，段落归段落 - Vue/React 中写
<p></p> <div>{text}</div>→ JSX 编译不报错，但运行时 DOM 已被浏览器修正，调试时 Elements 面板显示的不是你写的结构
如何快速发现并修复这类问题
别靠肉眼扫代码。打开 Chrome DevTools → Elements 面板，执行以下脚本定位非法嵌套：
document.querySelectorAll('p').forEach(p => {
if (Array.from(p.children).some(c => !['SPAN', 'STRONG', 'EM', 'A', 'IMG', 'CODE'].includes(c.tagName))) {
console.warn('非法子元素:', p, '子节点:', p.children);
}
});
- 搜索关键词：
<p></p> <div>、<code><p></p> <ul></ul>、<p><h>（配合 Ctrl+F）<li>检查 Elements 面板中 <code><ul></ul>或<ol></ol>的直接子节点是否全是<li>；如果不是，说明有<div> 被踢出，源头就在某处 <code><p></p>里 - 用 W3C HTML Validator（validator.w3.org）粘贴片段验证，它会明确指出 “Element div not allowed as child of element p”
- 想让一段文字带背景、边框、内边距？直接给
<p></p>加 class，用padding、background控制 - 需要“缩进式树形”？用单层
<ul><li data-level="2"></ul>+padding-left: calc(var(--level) * 1rem) - 要折叠展开？优先用原生
<details><summary></summary></details>，它不新增 DOM 层级，还自带无障碍支持 - 复杂卡片组合？用
<article></article>或<section></section>替代外层<div>，内部用 <code>display: flex或gap排列，不靠<p></p>撑结构关键点在于：DOM 结构只表达内容逻辑，不负责视觉对齐或缩进。把
<p></p>当成“纯文本容器”来用，它的职责边界就清晰了——越守界，越省事。
真正需要视觉分组或缩进时怎么办
别用嵌套伪造结构。浏览器解析阶段就已定型，视觉效果该由 CSS 承担：
