<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中有解释：

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

注意只有行框被缩短了，后面的块元素没有。

如果您不希望出现这种情况，可以让兄弟块建立一个块格式化上下文 (BFC)：

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context […] must not overlap the margin box of any floats in the same block formatting context as the element itself.

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

您的示例之间的唯一区别是文本的存在，它向下推 non-BFC 块。

<div> 标签在浮动元素下消失，但 <p> 标签或文本不会？

<div> tag disappears under a floated element, but a <p> tag or text does not?

html

css

css-float