为什么 div 标签没有阅读提及 class？

Question

我希望我的 div 标签具有不同于正文背景颜色的背景颜色，但我的浏览器只显示第一个 div 颜色已更改，而不是第二个。为什么？

body {
  background-color: Linen;
}

.names {
  background-color: Yellow;
}

.title {
  background-color: rgb(255, 0, 0)
}

<!doctype html>
<html>

<head>
  <title>Our Blog</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <div class="title">
    <h1 align="center">O</h1>
  </div>

  <div class="names">
    <h2 style="float: left">M</h2>
    <h2 style="float: right">F</h2>
  </div>

</body>

</html>

但是输出只显示第一个 div 背景颜色变化而不是第二个

Answer 1

不是names容器没有背景色，而是没有高度：

.names {
  background-color: Yellow;
  border: solid 1px green;
}

<!doctype html>
<html>

<body>

  <div class="names">
    <h2 style="float: left">M</h2>
    <h2 style="float: right">F</h2>
  </div>

</body>

</html>

它只浮动了 children，它们对 parent 的高度没有贡献。除非你明确地做某事，比如告诉 parent 防止溢出：

.names {
  background-color: Yellow;
  overflow: hidden;
}

<!doctype html>
<html>

<body>

  <div class="names">
    <h2 style="float: left">M</h2>
    <h2 style="float: right">F</h2>
  </div>

</body>

</html>

为什么 div 标签没有阅读提及 class？

Why div tag not reading mentioned class?

html

css

tags

web