为什么 div 标签不读取提到的类？ [复制]

【问题标题】：Why div tag not reading mentioned class? [duplicate]为什么 div 标签不读取提到的类？ [复制]
【发布时间】：2021-02-11 19:14:43
【问题描述】：

我希望我的 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 背景颜色更改而不是第二个

【问题讨论】：

标签： html css web tags

【解决方案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>

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

.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>

【讨论】：

没有人。名称类仍然没有改变颜色
您是否在我的回答中单击了“运行代码 sn-p”...？
是的，它在这里工作，但是当我在我的代码中做同样的事情时，上面 div 的背景颜色封装了名称类 div