HTML5引入的header、footer、nav、section、article等结构标签，让页面语义化更清晰，但如果使用不当很容易引发布局错位问题，这类问题通常会表现为元素位置偏移、内容溢出、区块重叠等情况。
常见的页面错位原因
1. 结构标签默认样式影响
大部分浏览器会给HTML5结构标签设置默认的margin和padding，不同浏览器的默认值可能存在差异，这会导致元素之间的间距不符合预期，进而引发错位。
2. 标签嵌套不符合规范
HTML5结构标签有明确的嵌套规则，比如section标签内部应该包含相关的内容区块，不能任意嵌套不相关的元素，错误的嵌套会破坏文档流，导致布局混乱。
3. 盒模型计算错误
当给结构标签设置width、height、padding、border属性时，如果没有调整盒模型类型，默认的内容盒模型会让元素实际占用的宽度超出预期，挤压其他元素的位置。
4>浮动未清除
如果在结构标签内部使用了浮动元素，没有及时清除浮动，会导致父标签无法获取正确的高度，后续的标签会向上偏移，出现错位。
布局修复技巧
重置默认样式
可以在CSS开头添加样式重置代码，统一结构标签的默认margin和padding，避免浏览器差异带来的问题：
/* 重置HTML5结构标签默认样式 */
header,footer,nav,section,article,aside,main {
margin: 0;
padding: 0;
display: block; /* 兼容旧版本浏览器识别结构标签 */
}
规范标签嵌套
遵循HTML5的嵌套规则，不要将块级结构标签嵌套在行内元素内部，同时保证内容的相关性。比如nav标签内部只放导航相关的链接，不要放置无关的内容区块。
调整盒模型为边框盒
给结构标签设置box-sizing: border-box属性，让width和height包含padding和border，避免计算实际宽度时超出预期：
/* 统一设置盒模型为边框盒 */
header,footer,nav,section,article,aside,main {
box-sizing: border-box;
}
清除浮动影响
如果结构标签内部有浮动元素，可以通过给父标签添加清除浮动的样式，让父标签能够包裹住浮动元素，避免后续元素偏移：
/* 清除浮动的公用类 */
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
给包含浮动元素的结构标签添加clearfix类即可解决浮动导致的高度塌陷问题。
使用Flex布局替代传统浮动
对于需要多列布局的结构标签，可以使用Flex布局，避免浮动带来的各种问题，Flex布局的兼容性现在已经很好，能够满足大部分布局需求：
/* 容器标签使用Flex布局 */
section {
display: flex;
justify-content: space-between; /* 子元素两端对齐 */
align-items: flex-start; /* 子元素顶部对齐 */
}
/* 子结构标签设置宽度 */
section > article {
width: 70%;
}
section > aside {
width: 28%;
}
问题排查步骤
如果遇到结构标签导致的页面错位，可以按照以下步骤排查：
- 先打开浏览器开发者工具，查看错位元素的盒模型参数，确认margin、padding、width、height是否符合预期
- 检查标签嵌套是否符合HTML5规范，有没有错误的嵌套关系
- 确认是否设置了正确的盒模型类型，有没有因为padding或border导致宽度超出
- 检查元素内部是否有未清除的浮动，或者是否可以使用Flex布局替代浮动方案
按照上述步骤排查，大部分HTML5结构标签导致的页面错位问题都可以快速定位并修复。