<p>只允许嵌套phrasing content（如<span>、、），禁止块级元素（如<div>）；浏览器会自动闭合<p>再将<div>移至外部，导致DOM断裂、样式错位、JS查询失败。
为什么 <p> 里能放 <span> 却不能放 <div>
因为 HTML 规范把 <p> 定义为“终端块级元素”，它只允许包含行内内容（text nodes、<span>、<a>、<strong> 等），不允许嵌套任何块级元素。这不是浏览器兼容问题，而是解析器强制行为：遇到非法嵌套时，会自动闭合当前 <p>，再开始新标签。
常见错误写法：<p>文字<div>子容器</div></p> → 实际 DOM 变成：<p>文字</p><div>子容器</div>，导致结构断裂、样式错位、JS 查询不到预期父节点。
<p> 合法嵌套的行内元素有哪些
可直接嵌套的典型行内元素包括：<span>、<a>、<strong>、<em>、<code>、<small>、<sub>、<sup>、<img>、<input>（虽是行内块，但语义上被允许）、<br>（自闭合）等。
注意：<button> 和 <select> 虽然视觉上像块级，但规范中属于“可替换行内元素”，也能合法出现在 <p> 中；而 <ul>、<h2>、<table>、<section> 等明确禁止。
立即学习“前端免费学习笔记（深入）”；
判断依据不是“能不能设宽高”，而是 W3C DTD 或 HTML Living Standard 中对 <p> 的 content model 定义：仅限 phrasing content（短语内容）。
想在段落里放结构化内容怎么办
别硬塞 <div> 进 <p>，有更语义正确且稳定的替代方案：
- 用
<span>+ CSS 控制布局（如display: block或display: flex），前提是不破坏语义层级 - 把
<p>拆成多个段落，用相邻兄弟关系组织内容 - 改用语义更宽松的多目标块级元素，比如
<section>或<article>包裹整个逻辑单元，内部自由嵌套<p>、<div>、<ul>等 - 若只是视觉分组需求，优先用 CSS Grid / Flex 布局控制子项，而非依赖非法嵌套
容易被忽略的边界情况
有些看似“行内”的标签其实不被允许——例如 <script> 和 <style> 是元数据类元素，不能出现在 <p> 中；<template> 也不行。还有两个高频陷阱：
— <p><div></div></p> 即使 <div> 为空，也会触发自动闭合
— 使用 JSX 或模板引擎时，动态插入块级元素到 <p> 内部，编译后仍会按 HTML 规则解析，不是“运行时才渲染”就能绕过
真正要检查的不是“看起来有没有换行”，而是浏览器 DevTools 中 Elements 面板显示的真实 DOM 结构 —— 那才是最终生效的布局依据。
