背景图像未显示在嵌套<nav>上

Question

我的<header>有嵌套<div>和<nav>。我使用background-image: url();在css中设置了背景图片，它在<header>和<div>上显示正常，但不在<nav>上显示。当<nav>具有设定高度时似乎有效，但不是。奇怪的是，标题也没有设定高度，但图像在那里显示正常。

我认为问题是<nav>包含浮动元素并且应用了clearfix但<header>没有，但我不知道如何解决这个问题和谷歌一直没有帮助。

这是问题的codepen（我使用scss预处理器fyi，但是如果你不喜欢，codepen允许你看看编译）。

非常感谢任何帮助！

Answer 1

您应该使用:before

更改:after课程

nav {
    //clearfix
    &:after {
        content: "";
        display: table;
        clear: both;
    }

希望我会帮助你。