HTML标签布局异常：新增内容位于导航Logo上方的问题求助

今天开始搭建个人作品集网站，导航栏已经完成，但新增的内容全部显示在Logo（我的名字）上方。

• 预期效果：导航栏固定在页面顶部，左侧显示Logo，右侧排列导航菜单，下方是独立的主内容区块
• 实际效果：主内容和导航栏挤在同一行，甚至出现在Logo上方
  尝试添加</p>标签无效，新增文本虽移到下方但仍和导航区域处于同一行，希望实现内容分区块的布局。

CSS代码 #

a {text-decoration: none;font-weight: bold;}
.nav-name {font-size: 27px;margin-left: 75px;margin-top: 10px;float: left;}
.nav-item {list-style: none;float: right;margin-left: 35px;margin-right: 10px;font-size: 18px;}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css" />
    <script src="https://kit.fontawesome.com/aab1cdc4fa.js" crossorigin="anonymous"></script>
    <title>Floris M portfolio</title>
</head>
<body>
    <header class="header-section" id="header">
        <nav>
            <div class="nav">
                <a href="#" class="nav-name">Floris</a>
            </div>
            <ul class="nav-item">
                <li class="nav-item"><a href="#programs">My programs</a></li>
                <li class="nav-item"><a href="#projects">My projects</a></li>
                <li class="nav-item"><a href="#skils">Skills</a></li>
                <li class="nav-item"><a href="#about">About me</a></li>
                <li class="nav-item"><a href="#home">Home</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="home-section" id="home">
            <div class="socials">
                <a href="https://github.com/Floris29"><i class="fa-brands fa-github fa-2xl"></i></a>
            </div>
        </section>
    </main>
</body>
</html>

原因分析 #

1. 使用float布局时，父元素<nav>未清除浮动，导致高度塌陷，下方<main>内容向上填充空白区域
2. HTML中<ul>和<li>共用类名nav-item，样式冲突引发布局混乱

修改方案（推荐使用Flex布局，更稳定易维护） #

修改后的CSS代码

a {
    text-decoration: none;
    font-weight: bold;
}

/* 用Flex实现导航栏布局 */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 75px;
    background-color: #fff; /* 可选：添加背景增强视觉区分 */
}

.nav-name {
    font-size: 27px;
}

.nav-items { /* 修改ul类名，避免与li冲突 */
    list-style: none;
    display: flex;
    gap: 35px; /* 用gap控制菜单间距，替代margin */
    margin: 0;
    padding: 0;
}

.nav-item {
    font-size: 18px;
}

/* 确保主内容与导航栏分离 */
main {
    margin-top: 20px; /* 可选：添加间距避免紧贴导航栏 */
}

修改后的HTML代码（仅调整导航部分）

<header class="header-section" id="header">
    <nav>
        <a href="#" class="nav-name">Floris</a> <!-- 移除多余div包裹 -->
        <ul class="nav-items"> <!-- 修改类名为nav-items -->
            <li class="nav-item"><a href="#programs">My programs</a></li>
            <li class="nav-item"><a href="#projects">My projects</a></li>
            <li class="nav-item"><a href="#skils">Skills</a></li>
            <li class="nav-item"><a href="#about">About me</a></li>
            <li class="nav-item"><a href="#home">Home</a></li>
        </ul>
    </nav>
</header>

传统Float修复方案（若坚持使用float） #

如果不想改用Flex，需给<nav>添加清除浮动的样式：

nav::after {
    content: "";
    display: table;
    clear: both;
}

同时修改HTML中<ul>的类名（如改为nav-items），避免与<li>的nav-item样式冲突：

<ul class="nav-items">
    <li class="nav-item">...</li>
</ul>

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