<p>标签不能嵌套<div>，因HTML规范禁止块级元素嵌入<p>中；浏览器会自动闭合<p>生成<p></p><div></div><p></p>结构，导致布局错乱。合法子元素仅限内联元素如<span>、、<img>等。
<p> 标签不能嵌套 <div>
为什么浏览器会自动修正 <p><div></div></p>
HTML 规范中，<p> 是“短语内容”容器，只允许嵌套内联元素（如 <span>、<a>、<strong>）和部分可选的流内容（如 <img>），但明确禁止嵌套块级元素（如 <div>、<section>、<p> 自身）。当解析器遇到 <p><div></div></p> 时，会认为 <p> 已被隐式闭合，实际生成的 DOM 类似：
<p></p> <div></div> <p></p>
——这会导致布局错乱、样式失效、JS 查询不到预期结构。
替代方案：用语义正确的容器替换 <p>
如果你需要在段落位置包裹一个可布局的块容器，应直接换掉 <p>，而不是硬塞 <div>：
立即学习“前端免费学习笔记（深入）”；
- 想强调一段文字且需额外样式？用
<div>+role="paragraph"或 CSSdisplay: block模拟，但语义上更推荐<section>或<article>（视上下文） - 只是为加 margin/padding/背景？直接给
<p>加 CSS，它本就是块级元素，无需套壳 - 需要内部有标题+段落组合？用
<header>+<p>，或<figure>+<figcaption>，而非<p><div><h3>...</h3><p>...</p></div></p>
哪些元素能合法嵌套在 <p> 里？
常见可用的有：<span>、<em>、<strong>、<a>、<img>（带 alt）、<time>、<ruby> 等；但以下会触发自动闭合：
-
<div>、<section>、<aside> -
<h1>–<h6>（哪怕只是<p><h3>标题</h3></p>） -
<p>自身（<p><p></p></p>→ 变成两个并列<p>） -
<form>、<ul>、<table>等交互/结构型块级元素
最常被忽略的是：即使你没写闭合标签，<p> 的结束也是“贪婪”的——只要下一个元素不被允许，它就立刻终止。别依赖肉眼判断嵌套是否生效，用浏览器开发者工具看真实 DOM 结构才可靠。
