<p>内不能嵌套任何块级元素，因浏览器解析时强制闭合<p>并移出<div>等流内容，使DOM变为<p></p><div>xxx</div>；合法子元素仅限phrasing content，如文本、<span>、<img>、等，display样式无法绕过该规则。
标签内不能嵌套任何块级元素——这不是样式问题，而是浏览器解析时强制修正的底层规则。你写的 <p><div>xxx</div></p>，实际 DOM 会变成 <p></p><div>xxx</div>，结构已不可逆地被破坏。
哪些标签明确禁止在 p 内出现
判断依据只有一个：W3C 规范中 p 的 permitted content 是 phrasing content（短语内容），不包括任何 flow content（流内容）元素。
-
<div>、<section>、<article>、<aside>、<footer>等通用块容器 -
<h1>～<h6>、<header>、<main>、<nav> -
<ul>、<ol>、<dl>、<table> -
<p>自身（嵌套p会触发自动闭合，第二个p变成兄弟节点） -
<form>、<fieldset>、<blockquote>
p 里能放什么？查 MDN 比猜更可靠
别靠“看着像行内就试试”，直接查 MDN 的 p 文档。合法子元素只有：
- 文本节点（含空格、换行）
-
<span>、<em>、<strong>、<small>、<time> -
<img>（带alt）、<input>（表单控件）、<button>（注意交互语义） -
<a>、<iframe>（虽为嵌入式，但规范归类为 phrasing）
关键点：<button> 和 <iframe> 能放进去，不是因为它们“够小”，而是规范明确定义为 phrasing content —— 别凭 display 样式判断合法性。
为什么 display: inline 也救不了 div
CSS 不参与 HTML 解析阶段。浏览器先按规范构建 DOM 树，此时 <p><div style="display: inline">xxx</div></p> 已被拆成 <p></p><div style="display: inline">xxx</div>；CSS 后续只作用于这个已修正的树。视觉上“看起来像一行”，但 JS 查询 document.querySelector('p div') 仍返回 null，p > div 选择器永远不生效。
立即学习“前端免费学习笔记（深入）”；
Vue / React 动态渲染时照样翻车
框架模板语法（如 v-html 或 dangerouslySetInnerHTML）输出的仍是原始 HTML 字符串，浏览器照常解析并修正。例如：
<p v-html="'<div>动态内容</div>'"></p>
结果仍是空 p + 外部 div。服务端渲染（SSR）若未校验嵌套，hydration 阶段会因 DOM 结构不一致直接报错或跳过挂载。
真正要警惕的，不是“写错了标签”，而是“以为加了 class 或 style 就绕过了语义约束”。DOM 结构一旦被浏览器静默重排，后续所有依赖层级关系的操作（CSS、JS、可访问性工具）都可能失效——而且你很难一眼看出来。
