为何类名为topnav的div元素无法显示palegreen背景色？

问题根源在于你给.topnav里的<a>标签设置了float: left——浮动元素会脱离常规文档流，导致父容器.topnav的高度塌陷（高度变为0），所以背景色根本没地方显示。

下面是几种可行的修复方法：

• 方法1：触发BFC包裹浮动元素
  给.topnav添加overflow: hidden属性，触发块级格式化上下文（BFC），让父容器自动包裹住内部的浮动元素：

  .topnav{
    background-color: palegreen;
    overflow: hidden;
  }
  .topnav a{
    float: left;
  }
  

• 方法2：用伪元素清除浮动
  这是更通用的清除浮动方案，不会有overflow可能带来的裁剪内容等副作用：

  .topnav{
    background-color: palegreen;
  }
  .topnav a{
    float: left;
  }
  /* 清除浮动的伪元素 */
  .topnav::after {
    content: "";
    display: table;
    clear: both;
  }
  

• 方法3：改用Flex布局（推荐）
  如果不需要兼容IE等旧浏览器，用Flex布局替代float更简洁，从根源避免浮动塌陷问题：

  .topnav{
    background-color: palegreen;
    display: flex;
  }
  .topnav a{
    margin-right: 16px; /* 可选，给链接添加间距 */
  }
  

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