HTML格式化不能修复布局Bug，但能暴露浏览器自动修正DOM导致的结构偏差；需用document.body.innerHTML比对源码、W3C验证器查非法嵌套、outline显形错位元素三者交叉验证。
HTML格式化本身不能修复布局Bug，但能帮你快速暴露浏览器“悄悄改写”后的结构偏差——真正的问题往往藏在你写的和浏览器实际解析出来的 DOM 之间。
用 document.body.innerHTML 对比源码，揪出被浏览器修正的结构
很多错位不是CSS问题，而是你写的 HTML 被浏览器自动闭合或拆分了。比如 <p>文字</p><div>块内容</div>，浏览器会强制变成 <p>文字</p> + <div>块内容</div>，导致父容器根本没包住后者。
- 在控制台运行
document.body.innerHTML，复制输出结果 - 和你本地源码逐行比对：多出来的
</p>、消失的<section>、意外提前闭合的<div>都是线索 - 右键父容器 → “Edit as HTML”，删一个字符再回车：如果子元素整体跳出去，说明原始结构已被修正
用 W3C Validator 直接定位非法嵌套与闭合错误
W3C 验证器不看渲染效果，只按 HTML5 规范校验语法。它报的错，比如 Element div not allowed as child of element p，就是布局崩坏的根因。
- 访问 https://www.php.cn/link/6c4ce2d66be954338a51e72eb79aae10，选 “Validate by Direct Input”
- 粘贴完整 HTML（必须含
<!DOCTYPE html>和</html>） - 优先修复所有
error级别问题，尤其是Stray end tag、Start tag was here这类提示 - 别忽略自闭合标签警告：写成
<img src="x"></img>会被当成两个标签，后续所有嵌套都会偏移一级
用 outline 快速显形错位元素，绕过样式干扰
别一上来调 margin 或 display，先让所有元素“浮出来”。outline 不影响盒模型，比 border 更可靠。
立即学习“前端免费学习笔记（深入）”；
- 控制台执行：
document.head.innerHTML += '<style>*{outline:1px solid red!important;background:rgba(255,0,0,0.05)!important;}</style>' - 立刻能看出哪个
<div>撑破了父容器、哪张<img>漂移了、<footer>是否被截断 - 如果页面太乱，缩小范围：
document.head.innerHTML += '<style>div{outline:2px solid #0088ff!important;}</style>' - 退出时执行
document.querySelector('style').remove()清除调试样式
格式化只是手段，关键在验证真实 DOM 结构
VS Code 里把代码缩进调得再漂亮，也掩盖不了 <p> 里塞 <div> 这种语义错误。格式化工具（如 Prettier）只能美化你写的 HTML，而浏览器解析时的修正行为，只有靠 document.body.innerHTML + W3C 验证 + outline 显形三者交叉验证才能抓到。最常被忽略的是：你看到的 Elements 面板，已经是浏览器“理解后”的 DOM，不是你的源码。
