如何在导航栏下方添加页面标题与内容？

1. 确认HTML结构的正确性 #

首先检查导航栏的标签（比如<nav>）是否完全闭合，把页面标题和内容放在导航栏标签外部的独立容器中，比如用<main>包裹主体内容：

<!-- 导航栏区域 -->
<nav>
  <a href="home.html">首页</a>
  <a href="about.html">关于</a>
  <a href="contact.html">联系</a>
</nav>

<!-- 页面主体内容，与导航栏平级 -->
<main>
  <h1>欢迎来到首页</h1>
  <p>这里是页面的具体内容区域，可以添加文本、图片等元素</p>
</main>

2. 修复CSS定位导致的布局问题 #

如果导航栏使用了position: fixed或absolute，它会脱离正常文档流，后续内容会被导航栏覆盖或者视觉上“跑到”导航栏内部。解决方式：

• 给主体内容容器设置margin-top，值大于等于导航栏的高度，让内容避开导航栏：

/* 导航栏样式 */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px; /* 根据你的导航栏实际高度调整 */
  background-color: #f0f0f0;
}

/* 主体内容样式 */
main {
  margin-top: 70px; /* 比导航栏高度多10px，避免紧贴 */
}

• 如果导航栏用了float布局，需要清除浮动，避免导航栏高度塌陷导致内容错位：

nav {
  overflow: hidden; /* 清除内部浮动，让导航栏高度正常 */
}

或者添加专门的清除浮动类：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后给导航栏标签加上这个类：<nav class="clearfix">...</nav>

3. 检查导航栏的容器范围 #

确认导航栏的height、padding、overflow等CSS属性没有意外扩大容器范围，导致后续内容被包含进去。比如不要给导航栏设置过大的padding-bottom，或者确保overflow属性不是visible以外的值（除非是故意的）。

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