HTML中header与div重叠及偏移问题求助：无需position属性的解决办法

嘿，我来帮你搞定这两个困扰你的布局小坑，都是前端开发里很常见的CSS细节问题，咱们一步步拆解：

问题1：Header与后续Div重叠 #

你用wrapper包裹header和div却没解决问题，大概率是因为你的header用了浮动（比如float: left/right），导致wrapper没有正确“包裹”住这个浮动元素，下面的div就会往上跑造成重叠。解决核心是让wrapper触发BFC（块级格式化上下文），这样它就能自动计算内部浮动元素的高度，避免布局坍塌。

你可以给wrapper添加以下任意一种样式：

• 方法1（兼容性拉满，适合老浏览器）：

.wrapper {
  overflow: hidden;
}

• 方法2（现代浏览器推荐写法，更语义化）：

.wrapper {
  display: flow-root;
}

设置后wrapper就会正确包含内部的header元素，下面的div自然就不会和header重叠了。

问题2：Header顶部/左侧偏移（不用position） #

这个问题的根源不是header本身，而是浏览器默认给body元素加了8px左右的margin，所以哪怕你给header设了margin/padding为0，body的默认边距还是会让header看起来有偏移。解决步骤很简单：

1. 先重置body的默认margin：

body {
  margin: 0;
}

2. 删掉header样式里的width: 100%——因为header是块级元素，默认width: auto就会自动填满父容器（也就是body），强行设width: 100%反而可能在后续加padding时导致横向溢出。

最终你的header基础样式可以是这样：

header {
  margin: 0;
  padding: 0;
  background: #eee; /* 加个背景方便看效果 */
}

这样header就会紧贴页面的顶部和左侧，完全不需要用position: absolute。

内容的提问来源于stack exchange，提问作者Clock Slave