导航栏与内容重叠问题求助：如何让内容显示在导航栏下方？

问题原因 #

1. 导航栏用了float: right，元素脱离正常文档流后，父容器高度塌陷，后面的内容会填充到导航栏的位置。
2. 外边距塌陷：相邻块级元素的margin会合并，给info2设margin-top时，会和上方容器的margin-top叠加，导致导航栏跟着移动。

方案一：修复浮动问题 #

修改CSS，给导航栏所在容器添加清除浮动的样式，同时重置默认边距避免干扰：

* {
  background-color: #171717;
  color: white;
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: 0; /* 重置浏览器默认边距 */
}

.container {
  margin: 0 25%;
  margin-top: 1%;
  overflow: hidden; /* 清除浮动，防止父容器高度塌陷 */
}

.nav nav {
  float: right;
}

.nav nav .links {
  display: flex;
  list-style: none;
  gap: 20px; /* 用gap替代margin，更简洁统一 */
}

.nav nav .links .link {
  font-size: 1em;
  font-weight: 500;
}

.info2 {
  margin-top: 20px; /* 现在设置margin-top不会影响导航栏 */
}

HTML保持不变：

<div class="container">
  <div class="nav">
    <nav>
      <ul class="links">
        <li class="link">Home</li>
        <li class="link">Project</li>
        <li class="link">About</li>
        <li class="link">Contact</li>
      </ul>
    </nav>
  </div>
</div>
<div class="container info2">
  <h1>Hello</h1>
</div>

方案二：用Flex布局替代浮动（更推荐） #

浮动是旧布局方式，用Flex可以更稳定实现导航栏右对齐，避免浮动带来的问题：

* {
  background-color: #171717;
  color: white;
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  margin: 0 25%;
  margin-top: 1%;
}

.nav {
  display: flex;
  justify-content: flex-end; /* 导航栏内容右对齐 */
}

.nav nav .links {
  display: flex;
  list-style: none;
  gap: 20px;
}

.nav nav .links .link {
  font-size: 1em;
  font-weight: 500;
}

.info2 {
  margin-top: 20px;
}

HTML无需修改，导航栏和Hero内容会正常上下排列，且设置info2的margin不会影响导航栏。

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