html背景颜色影响显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉框</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>

        /* 高度塌陷 */
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
            clear: both;
        }
        body{
            background-color: #bfa;
            /* 字体 */
            font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;

        }
        /* 外部容器样式 */
        .top-bar-wrapper {
            /* 宽度 */
            width: 100%;
            height: 30px;
            /* 背景颜色 */
            background-color: #e3e4e5;
            /* 文字垂直居中 */
            line-height: 30px;
           /* 下边框 */
            border-bottom: 1px solid #ddd;
        }
        /* 内部容器样式 */
        .top-bar {
            /* 固定宽度 */
            width: 1190px;
            /* height: 30px; */
            /* 水平居中 */
            margin: 0 auto;
            /* 背景颜色 */
            background-color: red;
            /* position: relative; */
        }
        /* 字体样式 */
        .top-bar a{
            color: #999;
            text-decoration: none;
        }
        .top-bar a:hover{
            color: red;
        }
        /* 左侧菜单样式 */
        .location{
            /* 左浮动 */
            float: left;
        }
        /* 城市列表样式 */
        .location .city-list{
            /* 隐藏 */
            display: none;
            width: 400px;
            height: 400px;
            background-color: white;
            border: 1px solid rgb(204, 204, 204);
            /* 设置绝对定位，使其不占据页面位置 */
            position: absolute;

            box-shadow: 0 2px 2px rgba(0, 0, 0, .2);

        }
        /* 设置边距 */
        .current-city{
            padding: 0 10px;
            border: 1px solid rgb(204, 204, 204);
            border-bottom: none;
            padding-bottom: 2px;
        }
         /* 当鼠标移入location，使city-list显示 */
         .location:hover .city-list{
            display: block;



        }
        /* 设置current-city鼠标移入的效果 */
        .current-city:hover{
            background-color: white;

        }
    </style>

</head>

<body>
    <!-- 外围容器 -->
    <div class="top-bar-wrapper">
        <!-- 内部容器 -->
        <div class="top-bar clearfix">
            <!-- 左侧菜单 -->
            <div class="location">
                <div class="current-city">
                    <a href="javascript:;">
                        ！北京
                    </a>
                </div>
                <!-- 城市列表 -->
                <div class="city-list">

                </div>
            </div>
        </div>
    </div>

</body>

</html>

在样式里有一段

.top-bar {
            /* 固定宽度 */
            width: 1190px;
            /* height: 30px; */
            /* 水平居中 */
            margin: 0 auto;
            /* 背景颜色 */
            background-color: red;
            /* position: relative; */
        }

背景颜色的存在对显示效果产生影响
背景颜色不设置时，是否固定高度对显示无影响

 .top-bar {
            /* 固定宽度 */
            width: 1190px;
            /* height: 30px; */
            /* 水平居中 */
            margin: 0 auto;
            /* position: relative; */
        }

显示效果

图片说明

# 放大图

图片说明
设置背景颜色后，就必须设置高度height才能保持上面的显示效果，如果不设置，就会变成下面这样

 .top-bar {
            /* 固定宽度 */
            width: 1190px;
            /* height: 30px; */
            /* 水平居中 */
            margin: 0 auto;
            /* 背景颜色 */
            background-color: red;
            /* position: relative; */
        }

图片说明

放大图

图片说明

这是为什么？

背景色是应用于top-bar-wrapper还是top-bar，因为top-bar-wrapper（top-bar的父对象）还有背景色，估计是搞错对象了

我手上没有环境，但是可以告诉你思路
用浏览器打开，f12，切换到style，可以看到每个元素应用了什么样式，勾选可以看到不应用后的效果
所以很快可以找到问题所在

看了好几遍没理解问的啥，写css时第一行先消除默认样式，简单些

*{
  padding:0;
    margin:0;
}