<div>标签在浮动元素下消失，但是<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在浮动的#bluediv下消失了。起初，我认为这是因为<div>是一个块元素，但是当我尝试<p>时，它也是一个块元素，它的行为如下：

#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>

它包围了浮动的#bluediv（与普通文本一起）！

他们为什么表现不一样？

Answer 1

该段落本身并不包围浮动。只有它的文本，以及段落和#greendiv之间的裸文本（它位于一个匿名的块框中）。

这就是为什么你还会注意到#greendiv被降低了 - 这是因为添加了段落，以及包含裸文本的匿名块框。

如果你使#bluediv半透明，将裸文本放在你可以用CSS定位的自己的块元素中，并使两个块元素的框可见（即对背景不完全透明），你可以看到是什么真的发生了：

#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>

Answer 2

9.5 Floats中解释了这一点：

  

由于浮动不在流中，因此创建了未定位的块框   在浮动箱垂直流动之前和之后，好像浮子没有   存在。但是，旁边创建的当前和后续行框   必要时缩短浮子以为边缘盒腾出空间   浮动。

请注意，只缩短了行框，但不包括以下块元素。

如果您不想要这种行为，可以让块兄弟建立块格式化上下文（BFC）：

  

表的边框，块级替换元素或   正常流程中的元素，用于建立新的块格式   上下文[...]不得与任何浮点数的边距框重叠   阻止格式化上下文作为元素本身。

.bluediv {
  background-color: blue;
  width: 100px;
  height: 100px;
  float: left;
}
.greendiv {
  background-color: green;
  width: 100px;
  height: 100px;
  overflow: hidden; /* Establish BFC */
}

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

您的示例之间的唯一区别是文本的存在，这会推下非BFC块。