css - 为什么CSS中的 "float"会破坏背景颜色

Question

当我使用它时，背景色就起作用了

    header {
        background-color: #bab615;

    }
    nav {
        background: #f96e5b;
        width: auto;
    }
    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        line-height: 1;
        display: block;
        zoom: 1;
    }

但是如果我在“nav ul”中添加一个 float ，例如向左飘浮;然后它使两个元素的背景颜色变为白色...为什么？

     header {
        background-color: #bab615;

    }
    nav {
        background: #f96e5b;
        width: auto;
    }
    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        line-height: 1;
        display: block;
        zoom: 1;
        float: left; <---This
    }

编辑:将#cssmenu 更改为 nav，因为它是 html 中的导航编辑#2:jsfiddle.net/5vjor56y

Answer 1

听起来您需要清除 nav 中的 float 元素。

您可以像这样在 css 中执行此操作:

nav {
  overflow: hidden;
}

这就是“clearfix”发挥作用的地方。这是执行上述操作的另一种方法:

.nav:after {
  content: "";
  display: table;
  clear: both;
} 

clearfix 可能是执行此操作的最佳方法，因为您不需要创建其唯一目的是清除 float 元素的 html 元素。要更深入地了解为什么必须这样做，请参阅此 css tricks article .