parent 及其 child 中定义的背景颜色，它们都没有成功

Question

有这个html:

        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        header {
            background-color: rgb(93, 43, 78);
            background-image: -webkit-linear-gradient(right, rgb(93, 43, 78), rgb(8, 2, 50)); /* no color in background */
        }

        header nav {
            background-color: red; /* neither here, still white background */
        }

        header ul {
            list-style: none;
        }

        header li {
            float: left;
            color: black;
        }

        p {
            clear: both;
        }

<html>
<body>
    <header>
        <nav>
            <ul>
                <li>test item1</li>
                <li>test item2</li>
            </ul>
        </nav>
    </header>
    <section>
        <br />
        <p>some text</p>
    </section>
</body>
</html>

我无法看到 header 父元素和 nav 子元素（header 的）的背景。两者都试图制作具有某种颜色或效果的背景，但都没有成功。为什么？

Answer 1

你的header好像没有设定高度。

尝试添加高度：30%；到 header{} 中的 css。

例如：

header   {
background-color: red;
height: 30%;
}

Answer 2

使用 div 而不是 header。然后你会看到结果。

<div>
test text 
</div>

div {
  background-color: lightblue;
}

Answer 3

您在 li 元素中使用了浮点数。这意味着它的 parent 的高度不适合。由于没有高度，颜色在那里不可见。

        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        header {
            padding: 10px;
            background-color: rgb(93, 43, 78);
            background-image: -webkit-linear-gradient(right, rgb(93, 43, 78), rgb(8, 2, 50)); /* no color in background */
        }

        header nav {
            background-color: red; /* neither here, still white background */
        }

        header ul {
            list-style: none;
        }

        header li {
            color: black;
        }

        p {
            clear: both;
        }

<html>
<body>
    <header>
        <nav>
            <ul>
                <li>test item1</li>
                <li>test item2</li>
            </ul>
        </nav>
    </header>
    <section>
        <br />
        <p>some text</p>
    </section>
</body>
</html>

Answer 4

这是使用 float 的问题之一...它将元素从流中移除，因此父级没有内容，因此没有高度。解决方法是 "clearfix" hack - 基本上，它强制父级采用其子级的高度。

您可以创建一个 clearfix class 并将其应用于任何浮动元素的父元素：

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

展开以查看工作示例：

body {
  font-family: Arial, Helvetica, sans-serif;
}

header {
  background-color: rgb(93, 43, 78);
  background-image: -webkit-linear-gradient(right, rgb(93, 43, 78), rgb(8, 2, 50));
  /* no color in background */
}

header nav {
  background-color: red;
  /* neither here, still white background */
}

header ul {
  list-style: none;
}

header li {
  float: left;
  color: black;
}

p {
  clear: both;
}

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

<html>

<body>
  <header>
    <nav class="clearfix">
      <ul>
        <li>test item1</li>
        <li>test item2</li>
      </ul>
    </nav>
  </header>
  <section>
    <br />
    <p>some text</p>
  </section>
</body>

</html>

Flexbox - 浮动的现代替代品

然而现在更好的选择是使用 flexbox - 你可以达到类似的效果但没有 hack，而且它也更灵活（顾名思义！）

您只需将元素设为直接父元素（在本例中为 ul）display: flex，它会自动将元素水平放置到可用的 space 中，例如

使用您的代码的简单 Flexbox 示例

body {
  font-family: Arial, Helvetica, sans-serif;
}

header {
  background-color: rgb(93, 43, 78);
  background-image: -webkit-linear-gradient(right, rgb(93, 43, 78), rgb(8, 2, 50));
  /* no color in background */
}

header nav {
  background-color: red;

}

header ul {
  list-style: none;
  display: flex;
}

header li {
  color: black;
}

p {
  clear: both;
}

<html>

<body>
  <header>
    <nav>
      <ul>
        <li>test item1</li>
        <li>test item2</li>
      </ul>
    </nav>
  </header>
  <section>
    <br />
    <p>some text</p>
  </section>
</body>

</html>

这只是 flexbox 能力的冰山一角。看看下面的参考资料，看看你能做什么！

关于 flexbox 的更多信息

parent 及其 child 中定义的背景颜色，它们都没有成功

background-color defined in parent and its child, nither of them succeed

html

css

background-image

background-color

Flexbox - 浮动的现代替代品