css - 除非添加溢出属性，否则无法更改导航栏颜色

Question

我正在开发产品着陆页。在更改导航栏的颜色时，我注意到只有在将 overflow 属性添加到 ul 元素后才能执行此操作。有人可以解释为什么吗？我了解 overflow:hidden 属性可防止文本超出列表范围，但不了解这与颜色变化有何关系。

  ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #dddddd;
  overflow: hidden;
}

li{
  float: left;
}

li a{
  display: block;
  padding: 30px;
}

这里是元素的链接 https://codepen.io/Alicinetto/pen/PowOvxM

Answer 1

因为li有 float 。你的 ul 高度为 0(它的高度崩溃，因为 child 有 float )这就是你看不到背景的原因。从 li 中删除 float 或为 ul 添加 clearfix。阅读有关 clearfix 的更多信息