当导航栏内部元素使用绝对定位时，父容器 nav 会因脱离文档流而高度坍缩为 0，导致后续内容（如 section）上移覆盖；正确做法是改用现代 flexbox 布局，让 nav 自然包裹子元素并正确计算高度。

当导航栏内部元素使用绝对定位时，父容器 nav 会因脱离文档流而高度坍缩为 0，导致后续内容（如 section）上移覆盖；正确做法是改用现代 flexbox 布局，让 nav 自然包裹子元素并正确计算高度。

在您提供的 HTML 和 CSS 中，nav 元素高度为 0 的根本原因在于：其唯一子元素

内部的 .center 和 .right 两个 div 均设置了 position: absolute。绝对定位会使元素脱离普通文档流，不再参与父容器的高度计算——因此即使这些 div 内包含可见内容，ul 也无法感知其尺寸，进而导致外层 nav 高度塌陷为 0。

此外，HTML 结构本身也存在语义与规范问题：

• 中直接嵌套 和
  是非法的（

  只允许
  • 作为直接子元素）；
  • 被错误地置于
    内部，破坏了列表结构；
  • 多处 float 与 absolute 混用，加剧布局不可预测性。

  ✅ 推荐解决方案：采用语义化 + Flexbox 布局
  我们重构为更健壮、可维护的结构：

  <header><a href="/" class="logo">
      <img src="resources/images/logo2.png" alt="hi-site.kr"    style="max-width:90%"   style="max-width:90%"></a>
    <nav aria-label="Primary navigation"><a href="school-info">School Info</a>
      <a href="/community">Community</a>
      <a href="/school-notice">School notice</a>
    </nav><a href="/account" id="account-link">Account</a>
  </header>

  对应 CSS（精简高效，无需 float/absolute）：

  
  造次
  一款AI视频创作工具，主要用于Liblib打造的AI原创IP视频创作社区，适合需要提升相关任务效率的用户。
  下载

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 15vw;
    border-bottom: 1px solid #111;
    margin-bottom: 1.5rem;
  }
  
  .logo img {
    width: 100px;
    height: 100px;
    object-fit: contain;
  }
  
  nav {
    display: flex;
    gap: 1rem;
  }
  
  nav a, #account-link {
    padding: 0.625rem 0.75rem; /* 10px 12px */
    color: black;
    text-decoration: none;
    border-radius: 4px;
  }
  
  nav a:hover, #account-link:hover {
    background-color: yellow;
  }
  
  #account-link {
    border: 2px solid black;
  }

  ? 关键改进点说明：

  • 语义清晰：用
    包裹导航区域，

    专用于导航链接，符合 HTML5 规范；
  • 流式自适应：Flexbox 让容器自动根据子项尺寸伸缩，nav 高度自然由内容撑开；
  • 消除脱离流风险：完全移除 position: absolute 和 float，避免高度坍缩；
  • 可访问性增强：添加 aria-label 提升屏幕阅读器兼容性；
  • 响应友好：gap 和 padding 使用相对单位，便于后续响应式扩展。

  ⚠️ 注意事项：

  • 切勿在需要参与高度计算的父容器中对子元素滥用 position: absolute 或 float；
  • /
    必须严格遵循 DOM 规范，仅包含
    1. 元素；
    2. 图片建议始终设置 width/height 属性或 aspect-ratio，防止布局抖动；
    3. 使用 object-fit: contain 替代固定宽高裁剪，确保 logo 比例安全。

  通过以上重构，

  将稳定占据页面顶部空间，后续
  会自然位于其下方，彻底解决“内容上浮”问题，同时提升代码可读性、可维护性与跨浏览器兼容性。