nav元素高度为0未被子元素ul撑开，section内容错位原因排查

问题代码 #

index.html #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/main_page.css">
</head>
<body>
  <nav> 
    <ul class="navbar-container center">
      <a id="home-menu-block" href="" class="navbar-logo">
        <img src="resources/images/logo2.png" alt="hi-site.kr" id="navbar-logo-image">
      </a>
      <div class="center">

        <li id="school-info-menu-block" class="navbar-block"><a href= "school-info" class="navbar-content">School Info</a></li>
        <li id="community-menu-block" class="navbar-block"><a href="/community" class="navbar-content">Community</a></li>
        <li id="school-notice-menu-block" class="navbar-block"><a href="/school-notice" class="navbar-content">School notice</a></li>
        
      </div>
      <div class="right">
        <li id="account-menu-block" class="navbar-block"><a href="/account" class="navbar-content">Account</a></li>
      </div>
    </ul>

  </nav>
  
  <section>
  </section>

  <footer>

  </footer>

</body>
</html>

main_page.css #

ul.navbar-container{
    width:70%;
    display:block;
    list-style-type: none;
    padding:0;
    border-bottom:#111;
    margin-top: 50px;
}

.center{
    margin-top:50px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

.right{
    margin-top:50px;
    position: absolute;
    right:0%;
    transform: translate(-50%, -50%);

}

.navbar-logo{
    float:left;
}
#navbar-logo-image{
    width:100px;
    height:100px;
    -webkit-user-select: none;
    user-select: none;
}

li.navbar-block {
    float: left;
    border:0px;
}

.navbar-content{
    padding: 10px 12px; 
    display: inline-block;
    text-align: center;
    color: black;
    text-decoration: none;
    -webkit-user-select: none;
    user-select: none;
}
.navbar-content:hover, .navbar-content-activated {
    background-color: yellow;
}

#account-menu-block{
    border:2px solid black;
}

问题描述 #

向<section>标签添加内容时，内容显示在屏幕顶部，原因是<nav>元素高度为0。但<nav>的唯一子元素ul.navbar-container具有非零高度且display为block，为何<nav>无法被其子元素撑开？

原因分析 #

1. 绝对定位导致元素脱离文档流
   ul.navbar-container被添加了.center类，该类设置了position: absolute。绝对定位的元素会完全脱离正常文档流，不再占据原有空间，父元素<nav>无法感知到这个子元素的存在，自然不会被撑开高度。

2. 内部浮动元素的高度塌陷（次要因素）
   导航栏内的.navbar-logo和li.navbar-block使用了float: left，浮动元素同样会脱离文档流，即使没有绝对定位，父元素也会因为子元素浮动出现高度塌陷。不过这里核心问题是绝对定位。

解决方案 #

推荐使用Flexbox布局重构导航栏，既可以实现所需布局效果，又能让父元素正常被撑开：

修改后的CSS代码 #

nav {
  margin-top: 50px; /* 保留原有的顶部间距 */
}

ul.navbar-container{
    width: 70%;
    display: flex; /* 改为flex布局 */
    justify-content: space-between; /* 元素分布在两端，中间自动填充 */
    align-items: center; /* 垂直居中 */
    list-style-type: none;
    padding: 0;
    margin: 0 auto; /* 水平居中 */
}

/* 移除原有的.center和.right的绝对定位样式 */
.center {
    display: flex; /* 内部菜单用flex横向排列 */
    gap: 10px; /* 菜单之间的间距 */
}

.right {
    /* 仅保留必要样式，去掉绝对定位 */
}

.navbar-logo{
    /* 去掉float，flex布局下自动排列 */
}
#navbar-logo-image{
    width:100px;
    height:100px;
    user-select: none;
}

li.navbar-block {
    /* 去掉float，flex布局下自动横向排列 */
}

.navbar-content{
    padding: 10px 12px; 
    text-align: center;
    color: black;
    text-decoration: none;
    user-select: none;
}
.navbar-content:hover, .navbar-content-activated {
    background-color: yellow;
}

#account-menu-block{
    border:2px solid black;
}

优化后的HTML结构（可选，符合语义规范） #

原HTML中<ul>直接包含<a>和<div>不符合语义规范，<ul>的直接子元素应该是<li>，可调整结构：

<nav> 
  <ul class="navbar-container">
    <li class="navbar-logo">
      <a id="home-menu-block" href="">
        <img src="resources/images/logo2.png" alt="hi-site.kr" id="navbar-logo-image">
      </a>
    </li>
    <li class="center">
      <ul>
        <li id="school-info-menu-block" class="navbar-block"><a href= "school-info" class="navbar-content">School Info</a></li>
        <li id="community-menu-block" class="navbar-block"><a href="/community" class="navbar-content">Community</a></li>
        <li id="school-notice-menu-block" class="navbar-block"><a href="/school-notice" class="navbar-content">School notice</a></li>
      </ul>
    </li>
    <li class="right">
      <li id="account-menu-block" class="navbar-block"><a href="/account" class="navbar-content">Account</a></li>
    </li>
  </ul>
</nav>

修改后，<nav>元素会被ul.navbar-container正常撑开高度，<section>的内容也会自然显示在导航栏下方。

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