为什么浮动div会从header区域开始排列，出现与header重叠的问题？

问题根源 #

• 你给.header设置了position: fixed，固定定位元素会脱离正常文档流，不会在原有排版位置占据空间，因此后续的非固定定位元素会默认从视口顶部开始渲染，直接和固定在顶部的header重叠。
• .side-nav因为同时设置了position: fixed和top: 8vh，偏移值刚好匹配header高度，所以位置正常；但.content和.footer是默认static定位的浮动元素，top属性对这类元素不生效，也没有对应的边距撑开header的高度，因此发生重叠。

解决方法 #

最简单的方案是给外层容器.container添加和header高度一致的顶部内边距，把下方所有内容整体向下偏移header的高度：

.container {
  background-color: orangered;
  margin: 0;
  max-width: 100%;
  width: 100%;
  padding-top: 8vh; /* 新增这行即可 */
}

如果不想修改容器样式，也可以单独给.content添加顶部外边距：

.content {
  background-color: #f4f4f4;
  min-height: 93vh;
  width: 85%;
  float: right;
  margin-top: 8vh; /* 新增这行 */
}

补充优化建议 #

• 可以给.side-nav明确设置宽度为15%，和.content的85%宽度匹配，避免侧边栏宽度异常。
• 如果后续要兼容不同设备的header高度变动，建议用CSS变量统一存储header高度值，后续修改只需要改一处即可：

:root {
  --header-height: 8vh;
}
.header {
  height: var(--header-height);
}
.container {
  padding-top: var(--header-height);
}
.side-nav {
  top: var(--header-height);
}

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