浏览器会自动修正dom结构，将span内的div移出作为兄弟节点；因span是内联元素，禁止嵌套div等块级元素，解析器强制闭合span后再插入div。

span 里放

会触发什么行为

浏览器不会报错，但会自动修正 DOM 结构——<span></span> 内的 <div> 会被“踢出”到 <code><span></span> 外面，成为其兄弟节点。这不是渲染异常，而是 HTML 解析器按规范强制修复的结果。

根本原因在于：<span></span> 是内联元素，而 <div> 是被禁止嵌套在内联上下文中的“可感知块级内容”。解析器遇到这种非法嵌套时，会终止当前内联上下文，提前闭合 <code><span></span>，再把 <div> 插入到刚闭合的位置之后。 <ul> <li>实际效果等价于手写：<code><span></span><div>...</div>

用 DevTools 查看 Elements 面板，能看到 DOM 已被重排，原始嵌套关系丢失

JS 操作 span.children 或 span.querySelector('div') 将返回 null

哪些元素真的不能塞进 span

不是所有块级标签都会被“踢走”，关键看是否属于“流内容中不允许出现在内联上下文”的类别。HTML 规范明确禁止以下常见元素作为 <span></span> 的子节点：

• <div>、<code><p></p>、<h1>–<h6></h6> </h1>、<ul></ul>、<ol></ol>、<li>
• <table> 及其子元素（<code><tr>、<code><td> 等） <li> <code><form></form>、<fieldset></fieldset>、<legend></legend>

但可以安全放入的包括：<span></span>、<a></a>、<em></em>、<strong></strong>、<img>、<input>（type 不为 hidden）、<button></button> 等内联级或“被允许在内联上下文中出现”的元素。

想包裹块级内容，该换什么标签

目标是语义正确 + 行为可控，别硬扛 <span></span>。根据使用场景选：

• 纯样式分组、无语义需求 → 改用 <div>（最直接，兼容性无顾虑） <li>需要内联布局但容纳块级子元素 → 用 <code><span></span> + display: inline-block 或 display: inline-flex，但注意：CSS 显示模式不改变 HTML 嵌套合法性，仍不能放 <div>，只是视觉上“看起来像块” <li>需要语义化容器（如一段独立功能区域）→ 用 <code><section></section>、<article></article> 或带 ARIA role 的 <span role="group"></span>（仅限辅助技术场景，不解决解析问题）

别用 <span></span> + display: block 来“伪装”块容器——它骗不过解析器，DOM 依然被破坏，后续 JS 或 CSS 依赖结构的操作大概率失效。

React/Vue 中的 span 嵌套陷阱

框架模板看似允许写 <span><div>xxx</div></span>，但这是 JSX/模板编译阶段的假象。真实渲染结果仍受 HTML 解析规则约束，尤其在 SSR 或服务端生成静态 HTML 时，问题立刻暴露。

• Vue SFC 中若用 <template><span><div>...</div></span></template>，dev server 可能不报错，但构建后 HTML 文件里 DOM 已被浏览器修正
• React 开发模式下 React.createElement('span', null, React.createElement('div')) 会正常执行，但最终挂载到 DOM 时仍触发解析修复
• 测试时用 container.innerHTML 检查结构，比依赖 React 调试器更可靠

真正可靠的写法是：从源头避免块级标签出现在 <span></span> 内——哪怕只为了省一次 DOM 调试时间。