元素正确包裹子元素并自动撑开高度 " />

高度为 0 是因内部使用 position: absolute 导致脱离文档流，父容器无法感知子元素尺寸；解决核心是移除绝对定位，改用现代 Flex 布局实现响应式导航栏结构。

`

` 高度为 0 是因内部使用 `position: absolute` 导致脱离文档流，父容器无法感知子元素尺寸；解决核心是移除绝对定位，改用现代 flex 布局实现响应式导航栏结构。

在原始代码中，

未能自动扩展高度的根本原因在于：其子容器（如 .center 和 .right）被设置了 position: absolute，导致它们脱离标准文档流。此时，

作为父元素无法获取这些绝对定位子元素的尺寸信息，因此计算出的高度为 0 —— 即使

本身是 display: block，也无法“撑开”父级
。

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

• 内直接嵌套 和
  是非法的（
  只允许
  • 作为直接子元素）；
  • 标签被错误地放在
    内部，破坏了列表结构；
  • 多处 float 与 absolute 混用，加剧布局不可预测性。

  ✅ 推荐解决方案：采用语义清晰、流式自适应的 Flex 布局重构导航结构：

  <header><a href="/" class="logo">
      @@##@@
    </a>
    <nav><a href="school-info">School Info</a>
      <a href="/community">Community</a>
      <a href="/school-notice">School notice</a>
    </nav><a href="/account">Account</a>
  </header>

  对应 CSS（精简、可维护、无副作用）：

  
  HTML Extract
  使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...
  下载

  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #333;
    margin: 0 5vw; /* 替代固定 width，更响应式 */
  }
  
  .logo img {
    width: 100px;
    height: 100px;
    object-fit: contain;
  }
  
  nav a,
  header > :last-child {
    padding: 0.625rem 0.75rem; /* 10px / 12px */
    color: inherit;
    text-decoration: none;
    border-radius: 4px;
  }
  
  nav a:hover,
  header > :last-child:hover {
    background-color: #ffeb3b;
  }
  
  header > :last-child {
    border: 2px solid #000;
  }

  ? 关键改进点：

  • 移除所有 position: absolute 和 float：确保所有导航项参与文档流，
    自动根据内容撑高；
  • 语义化标签升级：用
    包裹导航区域（比

    更贴合顶部栏语义），

    专注导航链接本身；
  • Flex 主导布局：justify-content: space-between 自然实现 logo 左对齐、菜单居中、账户右对齐（若需严格居中菜单，可用 flex: 1 + text-align: center 或嵌套 flex 容器）；
  • 避免硬编码 width: 70%：改用 margin: 0 5vw 实现响应式边距，适配不同屏幕；
  • 移除冗余类名与 ID：减少 CSS 耦合，提升可维护性。

  ? 补充提示：若仍需保留“菜单项水平居中”效果（而非左右分列），可微调

  内部样式：

  nav {
    flex: 1;
    text-align: center;
  }
  nav a {
    display: inline-block;
    margin: 0 0.5rem;
  }

  最终，

  将准确反映其子元素总高度，后续
  自然从导航下方开始渲染，彻底解决内容被遮挡问题。