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

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;
}

此处link到项目https://codepen.io/Alicinetto/pen/PowOvxM

Answer 1

因为li有浮动。你的 ul 高度为 0（它的高度崩溃因为 child 有浮动）这就是你看不到背景的原因。从 li 中删除 float 或为 ul 添加 clearfix。详细了解 clearfix

Answer 2

背景颜色无效，因为 ul 的高度为 0，因为它的所有子项都是 float: left。浮动会在布局流中造成很多奇怪的副作用，而且可能不是特别明显。修复这些副作用（将 'clearfix' 应用于浮动元素的父级）也很迟钝。

此外，overflow: hidden 似乎可以解决问题的原因是它强制创建新的块格式化上下文。这回避了浮动问题，但并没有真正解决它。

可能不需要在 li 元素上使用 float: left;。 inline-block 适用于简单链接列表。请记住，内联块元素之间通常有一点空白，这（我认为？）是由 HTML 源代码中的换行符引起的。这就是内联块可能不是好的解决方案的主要原因。

但是要继续您当前的设置，将下面的 clearfix 添加到您的 CSS 应该可以解决问题。

ul::after {
  content: "";
  display: table;
  clear: both;
}

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

Cannot change the navigation bar color unless adding overflow property

css

overflow

navigationbar

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

Cannot change the navigation bar color unless adding overflow property

css

overflow

navigationbar

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