html - <div> 标签在 float 元素下消失，但 <p> 标签或文本却没有？

Question

考虑这行代码:

#bluediv {
  background-color: blue;
  width: 100px;
  height: 100px;
  float: left;
}
#greendiv {
  background-color: green;
  width: 100px;
  height: 100px;
}

<div>
  <div id="bluediv">
  </div>
  <div id="greendiv">
  </div>
</div>

您会注意到，由于 #greendiv 消失在 float 的 #bluediv 下。一开始我以为是因为<div>是一个 block 元素，但是当我尝试 <p> 时，它也是一个 block 元素，它的行为如下:

#bluediv {
  background-color: blue;
  width: 100px;
  height: 100px;
  float: left;
}
#greendiv {
  background-color: green;
  width: 100px;
  height: 100px;
}

<div>
  <div id="bluediv">
  </div>
  <p>Paragraph</p>
  Normal text
  <div id="greendiv">
  </div>
</div>

它环绕 float 的#bluediv(以及普通文本)!

为什么他们的行为不同？

Answer 1

段落本身不会环绕 float 。只有它的文本，以及段落和 #greendiv 之间的裸文本(位于匿名 block 框中)。

这就是为什么您还会注意到 #greendiv 向下移动 - 这是因为添加了段落以及包含裸文本的匿名 block 框。

如果您使 #bluediv 半透明，将裸文本放入可以使用 CSS 定位的自己的 block 元素中，并使两个 block 元素的框可见(即，对背景不完全透明)，您可以看到什么真实发生的事情:

#bluediv {
  background-color: rgba(0, 0, 255, 0.5);
  width: 100px;
  height: 100px;
  float: left;
}
#greendiv {
  background-color: green;
  width: 100px;
  height: 100px;
}
p, span {
  display: block;
  border: solid;
}

<div>
  <div id="bluediv">
  </div>
  <p>Paragraph</p>
  <span>Normal text</span>
  <div id="greendiv">
  </div>
</div>