CSS浮动问题：第二组段落未成功应用浮动效果

问题描述 #

我正在学习约翰霍普金斯大学在Coursera平台上的CSS浮动章节，已经给第一组段落（P1-P4）设置了浮动效果，现在想给第二组段落（P5-P8）也应用浮动修改，要求：

• id为div2的容器内所有段落左浮动
• div2宽度自适应内容
• P5-P8横向排列成行
  但尝试后没能实现预期效果。

原代码 #

CSS代码 #

div {
  background-color: #00FFFF;
}

#div2 {
  background-color: #00FFFF;
}

p {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

#P1 {
  background-color: #A52A2A;
  float: right
}

#P2 {
  background-color: #DEB887;
}

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

#P4 {
  background-color: #FF7F50;
}

section {
  background-color: rgb(52, 143, 36);
  color: black;
  font-size: 120%;
  text-align: left;
  height: 50px;
  margin: 10px;
  border: solid black;
  padding: 20px;
}

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

#P5 {
  background-color: #A52A2A;
}

#P6 {
  background-color: #DEB887;
}

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

#P8 {
  background-color: #FF7F50;
}

HTML代码 #

<H1>Floating Part One</H1>
<div>
  <p id="P1"></p>
  <p id="P2"></p>
  <p id="P3"></p>
  <p id="P4"></p>
</div>

<H1>Floating Part 2</H1>
<div id="div2">
  <p id="P5"></p>
  <p id="P6"></p>
  <p id="P7"></p>
  <p id="P8"></p>

</div>
<section>We've removed the float right part and just make every paragraph float to the left with a margin right 10px </section>

问题分析与修正 #

错误点 #

1. 选择器错误：你写的p #div2是寻找<p>标签内部id为div2的元素，这和实际DOM结构（div2是<p>的父元素）完全相反，导致样式无法应用到目标段落。
2. 浮动容器高度塌陷：浮动元素会脱离正常文档流，父容器div2默认无法感知到浮动子元素的高度，会出现高度为0的情况，同时无法自适应内容宽度。

修正方案 #

1. 把错误的选择器p #div2改为#div2 p，这样才能选中div2下的所有<p>元素，给它们设置左浮动和右侧间距。
2. 给#div2添加overflow: auto触发BFC（块级格式化上下文），让容器包裹住浮动的子元素，同时实现宽度自适应内容的效果。

修正后的完整代码 #

CSS代码

div {
  background-color: #00FFFF;
}

#div2 {
  background-color: #00FFFF;
  /* 触发BFC，解决高度塌陷并让宽度自适应 */
  overflow: auto;
}

p {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

#P1 {
  background-color: #A52A2A;
  float: right
}

#P2 {
  background-color: #DEB887;
}

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

#P4 {
  background-color: #FF7F50;
}

section {
  background-color: rgb(52, 143, 36);
  color: black;
  font-size: 120%;
  text-align: left;
  height: 50px;
  margin: 10px;
  border: solid black;
  padding: 20px;
}

/* 修正选择器，选中div2下的所有p标签 */
#div2 p {
  float: left;
  margin-right: 10px;
}

#P5 {
  background-color: #A52A2A;
}

#P6 {
  background-color: #DEB887;
}

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

#P8 {
  background-color: #FF7F50;
}

HTML代码（无需修改，保持原结构即可）

<H1>Floating Part One</H1>
<div>
  <p id="P1"></p>
  <p id="P2"></p>
  <p id="P3"></p>
  <p id="P4"></p>
</div>

<H1>Floating Part 2</H1>
<div id="div2">
  <p id="P5"></p>
  <p id="P6"></p>
  <p id="P7"></p>
  <p id="P8"></p>
</div>
<section>We've removed the float right part and just make every paragraph float to the left with a margin right 10px </section>

内容的提问来源于stack exchange，提问作者FingerFefe