必须嵌套在内展示多行代码，因是行内元素会压缩换行与空格，单独使用导致格式塌陷；颠倒嵌套或混用会触发浏览器自动纠错，破坏dom结构，致使样式失效、js无法定位元素。
直接改 <code> 标签本身不会导致布局混乱，真正出问题的是它被错误嵌套、包裹了非法内容，或和 <pre class="brush:php;toolbar:false;"></pre> 混用后触发浏览器自动纠错——DOM 结构一变，后续所有样式和 JS 都可能失效。
为什么 <code> 会引发错位而不是报错
<code> 是行内元素，不能直接包含块级标签（如 <p></p>、<div>、<code><table>）。一旦写了 <code><code><div>xxx</div>，浏览器会强行“修复”：把 提前闭合，导致 <div> 被甩到外面，父容器塌陷、样式断链、JS <code>querySelector 找不到目标节点。
- 常见现象：一段代码块下方的按钮突然跑到右侧、
margin-bottom失效、display: flex容器里子项换行异常 - 检查方法：在 Elements 面板中右键
<code>→ “Edit as HTML”，删个空格回车——如果结构跳变，说明它已被浏览器重写过 - 真实 DOM 和你写的源码不一致，
document.body.innerHTML输出里会出现多出来的或消失的父容器
<code> 必须和 <pre class="brush:php;toolbar:false;"></pre> 配合使用才安全
单独用 <code> 只适合短代码片段（如 console.log()）；要展示多行、带缩进的代码块，必须外层套 <pre class="brush:php;toolbar:false;"></pre>，且两者不能颠倒顺序。
- ✅ 正确：
<pre class="brush:php;toolbar:false;"><code class="js">function foo() {<br> return true;</code></pre> - ❌ 错误：
<code><pre class="brush:php;toolbar:false;">...</pre>（<pre class="brush:php;toolbar:false;"></pre>是块级，不能塞进行内<code>） - ❌ 错误：
<pre class="brush:php;toolbar:false;"><code><div>...（<code><div> 不允许出现在 <code><code></code> 内） <li>性能提示：<code><pre class="brush:php;toolbar:false;"></pre>默认保留空白符，大量代码会拖慢渲染；可加white-space: pre-wrap改善可读性，但别用white-space: pre-line，它会吞掉换行 - 服务端清洗：入库前用正则剥离
<code>内部所有标签，只留纯文本（<code>console.log("a");） - 前端兜底：渲染前用
DOMPurify.sanitize(html, { ALLOWED_TAGS: ['code', 'br', 'span'] })过滤 - 别依赖客户端 JS 补闭合：像
html.replace(/<code>/g, '<pre class="brush:php;toolbar:false;"><code>').replace(//g, '</code></pre>')会破坏已有合法嵌套，尤其当页面已含<pre class="brush:php;toolbar:false;"><code></code></pre> - 检查点：打开 https://validator.w3.org/，粘贴出问题的 HTML 片段，重点看报错行附近的上下文
- 典型陷阱：
<p><code><span>let x = 1</span>——<span></span>在<code>内是允许的，但<span></span>带了style属性就可能被拦 - 稳妥做法：用
<code>包纯文本，高亮需求交给 Prism.js 或 highlight.js 的class="js"控制，别往里面塞 HTML 标签
富文本编辑器插入代码后布局崩了怎么办
用户从编辑器（如 TinyMCE、Quill）粘贴代码时，常带多余 <div>、<code><p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a>
<p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 或内联样式，这些会被直接塞进 <code>，立刻触发嵌套错误。
W3C Validator 报 “Element code is not closed” 怎么修
这不是说你漏写了
<code> 内部出现了不允许的子元素（比如 <strong></strong>、<em></em>），或者该 <code> 出现在了语义不允许的位置（如 <li> 外直接放 <code>）。
最易被忽略的是：很多团队把 <code> 当成“样式容器”用，给它加 display: block 或 padding，却忘了它仍是行内元素——一旦父容器是 flex 或 grid，它的对齐行为和 <span></span> 完全一致，不是你想的“自带换行块”。
