布局错位主因是浏览器修正html结构或资源静默加载失败；应先用devtools比对dom与源码、w3c验证器查嵌套错误，再检查network资源状态，而非直接调css。
布局错位不是“写得不对”，而是浏览器按自己理解的结构在渲染——你写的 HTML 和它实际解析出来的 DOM，常常不是一回事。
先看 DevTools 里 DOM 结构对不对
右键父容器 → “Edit as HTML”，删一个字符再回车：如果子元素整体跳出去，说明原始 HTML 已被浏览器修正过。这是最直接的证据。
- 运行
document.body.innerHTML，和你本地源码逐行比对，多出的、消失的<section></section>都是线索 - 用 W3C Validator 检查，报错如
Element div not allowed as child of element p必须优先修复——<p></p>里不能塞<div>，浏览器会自动闭合 <code><p></p>，后续内容就飘到外面了 - 别一上来调 CSS；结构崩了，样式再准也没用
- 能立刻看出哪个
<div> 撑破了父容器、哪张 <code><img>漂移了、<footer></footer>被截断了 - 如果页面太乱，缩小范围：
div { outline: 2px solid #0088ff !important; } - 退出调试时执行
document.querySelector('style').remove()即可清除 - 注意：
outline会覆盖部分伪元素效果（如::before背景），临时够用 -
<script></script>没加defer或async又放在里？它会同步下载并执行，直接中断 HTML 解析 - 字体文件（
.woff2）加载慢或失败，font-display: swap触发重排，文字突然“跳动”或撑开容器 - JS 过早操作 DOM？
DOMContentLoaded就读offsetWidth，这时 CSS 可能还在加载中——稳妥做法是等document.readyState === 'complete'或监听load事件 - 现象：
<header></header>显示为 inline、宽度塌陷、margin 不生效——实际是“无样式”，回退到浏览器默认值 - 修正方式：
header { height: 60px; }，或渐进迁移：header, .header { height: 60px; } - 浮动清除也一样：
<div class="clearfix"> 的规则不会作用于 <code><main></main>，得加main { display: flow-root; }或保留class="clearfix" - Flex/Grid 容器里子元素顺序错乱？DOM 结构调整后，
order值或选择器没同步更新，视觉顺序就和预期不符
用 outline 快速暴露错位元素
执行这行代码让所有元素显形：document.head.innerHTML += '<style>*{outline:1px solid red!important;background:rgba(255,0,0,0.05)!important;}</style>'。红色轮廓不干扰盒模型，比 border 更可靠。
检查资源是否真加载成功
很多错位根本不是 HTML 或 CSS 写错了，是关键资源压根没到浏览器手里——CSS 没加载，浏览器就退化渲染；JS 阻塞解析，后续标签可能被误包进前面未闭合的 <div> 里。
<ul>
<li>打开 Network 面板，过滤 <code>.css 和 .js，重点看状态码：404（路径错）、403（权限拒绝）、blocked:mixed-content（HTTP 资源被 HTTPS 页面拦截）
语义化替换后样式失效怎么办
<div class="header"> 换成 <code><header></header> 后布局乱了？不是新标签有问题，是你原来的 CSS 规则还写着 .header，压根没命中新标签。
真正卡住人的，从来不是某个属性怎么写，而是浏览器悄悄改写了你的 HTML 结构，或者资源静默失败却没报错——这两点最容易被忽略，也最难排查。
