div元素中的背景颜色不显示[重复]

Question

我正在学习这门名为 HTML、CSS 和 Javascript 的面向 Web 开发人员的课程。我在讲浮动元素的讲座中，我的问题是当我将属性“float”和“margin-right”添加到元素 p 选择器时，div 的背景消失了。有人可以帮帮我吗？

div {
  background-color: blue;
}

p {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  float: left;
  margin-right: 10px;
}

#p1 {
  background-color: #A52A2A;
}

#p2 {
  background-color: #DEB887;
}

#p3 {
  background-color: #5F9EA0;
}

#p4 {
  background-color: #FF7F50;
}

section {
  clear: left;
}

<div>
  <p id="p1"></p>
  <p id="p2"></p>
  <p id="p3"></p>
  <p id="p4"></p>
</div>
<section>This is regular content continuing after the paragraph boxes</section>

Answer 1

因为您使用的是float，您需要清除它，因为它会从文档流中删除。这个清除过程也称为Clearfix。

你可以这样做：

div:after {
  content: "";
  display: table;
  clear: both;
}

div {
  background-color: blue;
}

div:after {
  content: "";
  display: table;
  clear: both;
}

p {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  float: left;
  margin-right: 10px;
}

#p1 {
  background-color: #A52A2A;
}

#p2 {
  background-color: #DEB887;
}

#p3 {
  background-color: #5F9EA0;
}

#p4 {
  background-color: #FF7F50;
}

section {
  clear: both;
}

<div>
  <p id="p1"></p>
  <p id="p2"></p>
  <p id="p3"></p>
  <p id="p4"></p>
</div>
<section>This is regular content continuing after the paragraph boxes</section>

你现在不应该使用floats。使用flexbox 和grid 等现代技术。

一些有用的资源：

• How TO - Clear Floats (Clearfix)

• The Clearfix: Force an Element To Self-Clear its Children

• Clearfix: A Lesson in Web Development Evolution

Answer 2

float 属性从文档流中删除元素。由于div 包含p 浮动元素并且没有设置height，因此高度为0。为div 设置高度。

Answer 3

float 属性的行为类似于 position:absolute 会

即使<p> 在<div> 中，此属性也会使其“弹出”<div>，移除其自动高度和宽度，从而使<div> 高度为0px，宽度为0px ，这样你就看不到了

解决它的一种方法是为您的<div> 设置高度和宽度