HTML/CSS学习疑难：导航栏(nav)背景色无法显示求助

核心问题 #

你遇到的nav背景色无法显示，本质是浮动元素导致父容器高度塌陷：
你给nav li设置了float: left，浮动元素会脱离正常文档流，使得父元素nav无法感知到子元素的高度，最终nav的高度被压缩为0，设置的背景色自然无法显示。

解决方案 #

下面是几种常用的修复方法，按推荐优先级排序：

1. 伪元素清除浮动（最优方案）

通过给nav添加伪元素，强制清除内部浮动，不增加冗余HTML：

nav {
    background-color: red;
}
/* 添加这段清除浮动的代码 */
nav::after {
    content: "";
    display: table;
    clear: both;
}

2. 给nav设置overflow属性

简单快速，但要注意：如果后续需要在nav内添加超出容器的元素（如下拉菜单），会被裁剪：

nav {
    background-color: red;
    overflow: hidden;
}

3. 新增清除浮动的HTML元素

在nav内部的ul末尾添加空元素，手动清除浮动（不推荐，会增加冗余代码）：

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="yurts.html">Yurts</a></li>
        <li><a href="index.html">Activities</a></li>
        <li><a href="index.html">Reservtions</a></li>
    </ul>
    <div style="clear: both;"></div>
</nav>

额外代码修复 #

你的CSS代码里存在无效语法，会影响整体解析，需要删除：

.content{
    margin-top: 70px;
    s /* 删掉这行无效的"s" */
}

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