html - CSS float 属性 - float div 与 float 段落时的行为差异

Question

我正在学习使用 CSS float 属性。我想了解此属性的特定效果。

考虑以下简单的 HTML 元素:

<div id="div1">div1</div>
<div id="div2">div2</div>
<p>This is a paragraph</p>

以及以下 CSS 规则:

div {
  height: 100px;
  width: 100px;
}

#div1 {
  background-color: blue;
}

#div2 {
  background-color: red;
}

p {
  background-color: green;
}

如果我float: left #div1，#div2 不再可见(因为它现在隐藏在#div1 后面)。

如果我要 float: left #div2，我希望该段落会发生类似的事情。

但事实并非如此。该段落的行为与 div 不同。它没有隐藏在#div2 后面，而是紧挨着它。

有人可以解释为什么会有这种行为差异吗？

谢谢。

编辑1:

这是 Stacksnippet，带有初始代码

div {
  height: 100px;
  width: 100px;
}

#div1 {
  background-color: blue;
}

#div2 {
  background-color: red;
}

p {
  background-color: green;
}

<div id="div1">div1</div>
<div id="div2">div2</div>
<p>This is a paragraph</p>

这是在 #div1 CSS 规则中声明的带有 float: left 的片段。

div {
  height: 100px;
  width: 100px;
}

#div1 {
  background-color: blue;
  float: left;
}

#div2 {
  background-color: red;
}

p {
  background-color: green;
}

<div id="div1">div1</div>
<div id="div2">div2</div>
<p>This is a paragraph</p>

下面是我在 #div2 规则中使用相同声明时发生的情况:

div {
  height: 100px;
  width: 100px;
}

#div1 {
  background-color: blue;
}

#div2 {
  background-color: red;
  float: left;
}

p {
  background-color: green;
}

<div id="div1">div1</div>
<div id="div2">div2</div>
<p>This is a paragraph</p>

Answer 1

float 元素将使该元素脱离非 float 元素流。但是这些其他元素的TEXT会漂浮在 float 元素周围。试着让你的 div2 更大，并在里面放更多的文字，然后你就会明白我的意思了。