html主内容必须位于源码靠前位置，否则爬虫因不执行css/js而按dom顺序解析，导致seo降权；安全做法是先写再用css布局，而非依赖float/flex/grid调整视觉顺序。
主内容区块必须出现在 HTML 源码靠前位置，否则无论用 float、flex 还是 grid，SEO 都会受损——这不是 CSS 的问题，而是 DOM 顺序本身被爬虫直接消费。
为什么“源码顺序 ≠ 视觉顺序”会触发 SEO 警告
搜索引擎（如 Google、Screaming Frog）和多数爬虫只解析原始 HTML 文本，不执行 JS，也不模拟 CSS 渲染。如果源码中 <div class="sidebar"> 出现在 <code><main></main> 前面，哪怕你用 float: right 或 grid-column: 3 把它视觉上挪到右侧，爬虫仍把它当首页首块内容处理。
常见危险结构：
-
<header></header>→<div class="ad"> → <code><main></main>→<h1></h1>（<h1></h1>在源码中靠后） -
<footer></footer>里塞<h1></h1>，再用 CSS 拉到顶部 -
clear: both或::after伪元素只能修复塌陷，完全不改变 DOM 顺序 - 把
<aside></aside>放在<main></main>前，再加<div style="clear:both"></div>，只是让页面不崩，爬虫照旧读取错误顺序 - IE6/7 下甚至因
float触发hasLayout，导致部分元素被跳过索引 - 保留旧模板结构（
<aside></aside>写在<main></main>前），仅把float换成grid-template-areas - 滥用
order: -1把侧边栏视觉前置，但<main></main>在源码中仍是第 4 个子节点 - 混用
grid-auto-flow: dense，导致 DOM 靠后的卡片（如第 7 个<article></article>）突然出现在首屏第一行，而爬虫和 Tab 导航仍按源码顺序走 -
<main></main>是内第一或第二级有意义子元素（跳过<header></header>后就该是它） -
<h1></h1>必须包裹在<main></main>或<article></article>内，且出现在其子树靠前位置 - 广告、侧边栏、底部导航等次要内容，HTML 中必须写在
<main></main>之后
后果：关键词权重稀释、Lighthouse 报 “Main content missing”、SEO 工具标记 “content order mismatch”。
浮动布局中 DOM 顺序错位的典型表现
使用 float 实现两栏/三栏时，DOM 顺序极易被忽略，因为视觉上“看起来正常”会掩盖语义风险。
例如圣杯布局或双飞翼布局中，若按“左栏→右栏→主内容”写 HTML，再靠 float + margin-left: -100% 把主内容提上来，源码里 <main></main> 仍在最后——禁用 CSS 后页面“乱序”，就是明确的 SEO 风险信号。
关键点：
Flex/Grid 替代浮动后仍需检查 DOM 顺序
改用 display: flex 或 display: grid 并不自动修复 SEO 问题。它们只是渲染层变更，DOM 顺序不变，语义层级就不变。
典型误操作：
验证方式：右键 → “查看网页源代码”，不是开发者工具的 Elements 面板；用 Lighthouse 的 “Accessibility” 审计项看 “Logical tab order”。
安全做法：先调 HTML 结构，再控 CSS 布局
真正有效的 SEO 优化动作，发生在 HTML 编写阶段，而非 CSS 调整阶段。
必须满足：
此时再用 float、flex 或 grid 控制显示位置，才是安全的。否则，所有 CSS 技巧都只是在给语义缺陷打补丁。
