非浮动元素的大小决定它是否包裹浮动元素

Question

我怀疑非浮动块元素相对于浮动元素的定位方式。 让我们考虑下面的 HTML 代码。第三个 div 正确定位在两个浮动 div 的右侧。

<section style="width:150px;">
  <div style="float:left; width: 50px;height: 150px;background: pink;border:solid 1px;">3</div>
  <div style="float:left; width: 50px;height: 150px;background: pink;border:solid 1px;">3</div>
  <div style="background: cyan;">3</div>
</section>

例如，如果我设置第三个的宽度

<div style="width:50px;background: cyan;">3</div>

第三个 div 与第一个 div 重叠。特别是，它落后于第一个。

<section style="width:150px;">
  <div style="float:left; width: 50px;height: 150px;background: pink;border:solid 1px;">3</div>
  <div style="float:left; width: 50px;height: 150px;background: pink;border:solid 1px;">3</div>
  <div style="width:50px;background: cyan;">3</div>
</section>

你能向我解释一下这背后的原因吗？

Answer 1

浮动从正常流中取出，但稍后绘制，因此流入块级别框的边距框始终绘制在浮动后面。

重要的是线路盒。它们是否有足够的空间可供文本（即“3”字符）显示在浮动旁边？在第一个示例中存在，因此文本显示在那里。在第二个例子中，没有。因此文本显示在第一行，其中有空间，位于浮动下方。流入的块级框向下延伸到足以包含文本。