p里放div会“消失”是因为p只允许phrasing content，div属flow content，浏览器依规范强制闭合p并移出div；导致p>div选择器失效、JS查不到元素、间距断层，须用W3C Validator或Elements面板验证真实DOM。
为什么 p 里放 div 会突然“消失”
浏览器不是“纠错”，而是按 HTML 规范强制解析：只要遇到 div 这类 flow content，p 就立刻闭合。你写的 <p>文字</p>
<div>块内容</div>
<p>文字</p>
<div>块内容</div>
<p></p> —— 中间那个 div 已经和 p 毫无关系。
后果很直接：p > div 选择器永远匹配不到；document.querySelector('p div') 返回 null；原本靠 p 的 margin-bottom 控制的间距也断掉了。
立即学习“前端免费学习笔记（深入）”；
哪些标签真不能塞进 p 里
p 只允许 phrasing content，常见合法子元素包括：em、strong、a、img、time、button（注意：button 是例外，它虽是交互元素但被规范允许）。
以下标签一旦出现，p 立刻被闭合：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
div、section、article、header -
ul、ol、li -
h1～h6、dt、dd -
table、form、iframe
连 <h3>标题</h3> 塞进 p 都会触发闭合——这不是“看起来还行”，是 DOM 结构已失控。
怎么快速验证是不是被浏览器“动过手脚”
别信源码，看 Elements 面板里的实时树形结构：
- 右键某个
p节点 → “Edit as HTML”，删个空格再回车，如果子节点瞬间跳到外面，说明原始嵌套非法 - 在控制台运行
document.querySelectorAll('p').forEach(p => console.log(p.textContent.length))，如果出现大量空字符串，很可能有被自动补出的空p - 查
document.querySelector('p div')，返回null就基本坐实了
W3C Validator（validator.w3.org）会明确报错：Line 42, Column 8: Element “div” not allowed as child of element “p” in this context.
替代方案不是“绕开规则”，而是用对语义
想实现“段落+下方区块”的视觉效果，正确做法是放弃在 p 里塞东西：
- 改用
<p>正文</p> <div class="block-after-paragraph">卡片内容</div>，用 CSS 控制间距 - 若需语义关联，用
figure/figcaption（适合图文组合）、aside（适合补充说明） - 富文本编辑器输出的 HTML 常含非法嵌套，后端清洗时可用正则或 DOMPurify 配置
FORBID_TAGS: ['div']在p内移除
最易被忽略的是：服务端渲染（SSR）与客户端 hydration 时，DOM 结构不一致会直接触发 React/Vue 的 mismatch 警告——这问题不会在开发环境报错，但上线后首屏就可能白屏或样式闪动。
