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，所以您需要清除它，因为它已从文档流中删除。此清除过程也称为清除修复。

你可以这样做：

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 等现代技术。

一些有用的资源：

Answer 2

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

Answer 3

float 属性就像 position:absolute 一样

即使 <p> 在 <div> 中，这个属性也会让它从 <div> 中“弹出”，移除它的自动高度和宽度，从而使 {{1 }} 0px 高度，0px 带，这样你就看不到了

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

div元素中的背景颜色未显示

3 个答案: