<p>标签不能嵌套任何块级元素，包括<div>、<h2>、<ul>、<p>自身及<section>等，浏览器会强制闭合<p>并移出块级元素，导致DOM结构异常、CSS/JS失效。
直接说结论：<p> 标签**不能嵌套任何块级元素**，包括 <div>、<h2>、<ul>、<p> 自身，甚至 <section> 或自定义 Web Component。这不是“建议”，而是 HTML 解析器的强制行为——写进去，浏览器就给你静默重写 DOM。
为什么 <p> 里放 <div> 后 CSS 和 JS 都失效了
HTML 规范规定 <p> 的 content model 只允许 phrasing content（短语级内容），比如 <span>、<strong>、<a>、<img>，但不包括 <div> 这类 flow content。一旦解析器在 <p> 内部遇到 <div>，它会立即闭合当前 <p>，再把 <div> 插到外面作为兄弟节点。
常见后果：
-
document.querySelector('p > div')永远返回null - 原本靠
<p>的margin控制的段落间距消失，视觉上“断层” - 服务端渲染（SSR）时拼出
<p>xxx</p><div>yyy</div>，客户端 hydration 因 DOM 结构不一致而失败 - DevTools Elements 面板里看到的结构，和你写的源码完全不一样
<p> 能合法嵌套哪些标签
只限以下几类，且必须是语义合理、非块级的：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 内联元素：
<span>、<em>、<strong>、<a>、<code>、<time> - 可替换内联元素：
<img>、<input>（type 不为 hidden）、<textarea> - 零宽度/装饰性标签：
<br>、<wbr>
注意：<a> 在 HTML5 中被允许包裹块级内容（如 <div>），但 <p> 不在此列——二者 content model 完全不同，不能类比。
组件开发中替代 <p> 嵌套块级结构的方案
如果你需要在段落级语义下组织更复杂的子结构（比如带图标的说明项、带操作按钮的文本块），不要硬塞进 <p>，改用语义等价但 content model 更宽松的容器：
- 用
<div>+ ARIA：如果只是视觉分组，<div role="paragraph">显式声明语义，再配aria-label或aria-labelledby - 用
<section>或<article>：当内容有独立主题或可分章节时，它们天然支持嵌套任意 flow content - 用
<figure>+<figcaption>：图文混排场景下，比<p><img></p>更规范且可嵌套标题、说明等 - 用 CSS Grid/Flex 封装：把
<p>和相邻<div>提到同一父容器，用样式控制对齐与间距，而非依赖非法嵌套
最常被忽略的一点：W3C 验证器不会报错，但 DevTools 的 Elements 面板里显示的 DOM 才是你真正能操作的对象——写之前先看它长什么样，比读规范还管用。
