根本原因是CSS选择器未同步更新，如将.div-header改为header；浮动清除失效因clearfix类未迁移；Flex/Grid中order值或选择器未随DOM结构调整。

HTML5 语义化标签替换后布局错位，根本原因几乎总是 CSS 选择器没同步更新，而非标签本身不兼容。

为什么 <div class="header"> 换成 <code><header></header> 就乱了

浏览器对 <header></header>、<nav></nav>、<main></main> 等元素默认赋予了 display: block，行为和 <div> 一致；错位不是因为新标签“变了”，而是你原来的 CSS 写的是 <code>.header 或 div.header，现在 DOM 里没有 class="header" 了，样式直接失效。

常见错误现象：<header></header> 变成 inline 行内表现、宽度塌陷、margin 不生效——其实是没匹配到任何规则，回退到了浏览器默认（极简）样式。

• 检查 DevTools 的 Elements 面板，看目标元素是否被任何 CSS 规则命中（右侧 Styles 标签页）
• 把原来基于 class 的规则，改成直接作用于语义化标签，例如：把 .header { height: 60px; } 改为 header { height: 60px; }
• 如果多个页面共用同一套 CSS，且部分仍用 <div class="header">，建议保留 class 并逐步迁移，避免一次性改崩 <h3>浮动清除失效：<code><aside></aside> 和 <section></section> 并排时塌陷

旧写法常用 <div class="clearfix"> 或 <code>overflow: hidden 清除浮动，但换成语义化标签后，若 CSS 中清除规则绑定在特定 class 上（如 .clearfix::after），而新结构没加该 class，清除逻辑就丢了。

立即学习“前端免费学习笔记（深入）”；

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

使用场景：侧边栏 <aside></aside> 左浮动，主内容 <section></section> 用 margin-left 让出空间，但父容器高度为 0。

• 最稳妥做法：给父容器（如 <main></main>）加上 display: flow-root（现代方案，兼容 Chrome 58+/Firefox 57+）
• 兼容老浏览器：保留 clearfix class，加在语义化父容器上，例如 <main class="clearfix"></main>
• 避免用 float 布局新项目，改用 flex 或 grid —— 语义化标签与它们天然契合

Flex/Grid 容器里的子元素顺序错乱

HTML5 语义化常伴随 DOM 结构调整，比如把 <div id="nav"> 提到 <code><header></header> 外部，或把 <footer></footer> 移入 <main></main>。如果父容器是 display: flex 且设置了 order，而你没同步更新子元素的 order 值或选择器权重，视觉顺序就会和预期不符。

性能影响：DOM 重排本身开销不大，但 order 错位常导致 JS 逻辑（如 document.querySelector('nav')）取到错误节点，引发后续连锁问题。

• 用 DevTools 的 Layout 面板开启 “Flexbox overlay”，直观查看实际排列顺序
• 不要依赖 HTML 顺序做逻辑判断，显式用 data-order 或 class 区分关键节点
• 如果必须靠 DOM 顺序，改用 display: contents 让语义化标签不参与盒模型（注意兼容性：IE 不支持）

最容易被忽略的是：语义化不只是换标签，它让结构有了隐含层级。比如 <article></article> 内的 <header></header> 和页面级 <header></header> 在样式继承、JS 查询范围上已不同，不加区分地复用同一套 CSS 类名，很快就会陷入 specificity 战争。