浏览器静默修正非法嵌套dom结构，如被强制闭合并将移为兄弟节点，导致css/js失效；根源是html规范中仅允许phrasing content，w3c验证器报错“element div not allowed as child of element p”。
浏览器解析阶段就强制修正 DOM 结构
不是 CSS 没生效，也不是 JS 写错了，而是你写的 <p></p>
<div>内容</div>
<div> 的瞬间，就自动插入一个 ，再把 <code><div> 移到外面，最后补一个空 <code><p></p>。实际生成的 DOM 是：<p></p>
<div>内容</div>
<p></p>。
这个行为不报错、不警告，但后果直接：CSS 选择器 p > div 永远匹配不到；document.querySelector('p div') 返回 null；p { padding: 1em; } 对 <div> 完全无效——它已不在 <code><p></p> 内部。
根本原因是 content model 限制
<p></p> 在 HTML 规范中被定义为“phrasing content container”，只允许包含行内级内容（如 <em></em>、<strong></strong>、@#@#@#@#@#@#@#@#@#@0（HTML5 允许 <a></a> 包块级）
<header><h3>标题</h3>
<div class="meta">副标题</div></header>
最易被忽略的一点：服务端渲染（SSR）或静态生成（SSG）输出的 HTML，如果含非法嵌套，客户端 hydration 时 DOM 结构不一致，可能引发 React/Vue 的 checksum mismatch 错误——这问题往往出现在上线后，且难以复现。
