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

Question

我正在开发产品着陆页。在更改导航栏的颜色时，我注意到只有在将溢出属性添加到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

因为李有浮空。您的ul的高度为0（其高度崩溃vecause孩子的身高为浮动），这就是为什么您看不到背景的原因。从li删除float或为ul添加clearfix。了解有关clearfix的更多信息>

Answer 2

背景色不起作用，因为ul的高度为0，因为其所有子级均为float: left。浮动会在布局流程中引起很多怪异的副作用，而且可能不是特别明显。修复这些副作用（将'clearfix'应用于浮动元素的父元素）也很钝。