为什么浮动元素不会挤压内联元素？

Question

我正在尝试研究css float的行为。这是有线的：JSFiddle。我有一个容器，一个内联span和两个浮动p：

<div id="box1">
    <span>Box 1</span>
    <p id="p1">Paragraph 1</p>
    <p id="p2">Paragraph 2</p>
</div>

如果span不在，p1和p2将在同一行。但是，当p1向右挤压span时，p2会被放入下一行！

根据我的理解，p2应该放在p1的右侧，而span应该被压缩到下一行。我检查过Spec但找不到原因。 （好吧，也许我没有理解规格）。

是什么原因？

Answer 1

通常情况下，如果没有宽度限制，#p1和#p2都会与span旁边的#p2一起浮动。

但是因为span首先出现在标记中，然后是浮动元素，这意味着span需要定位得尽可能高，浮点跟随着与span（以及必要时的后续行）。这条线被称为＆＃34;当前线＆＃34;在规范中。以下是您链接到的部分的相关引用：

  

浮动是一个在当前行上向左或向右移动的框。

  

浮动框向左或向右移动，直到其外边缘接触包含块边缘或另一个浮动边缘的外边缘。如果有行框，则浮动框的外部顶部与当前行框的顶部对齐。

  

浮动框之前的当前行中的任何内容都会在浮动的另一侧的同一行中重排。换句话说，如果在遇到适合剩余行框空间的左浮动之前将内联级别框放置在该行上，则将左浮动放置在该行上，与行框顶部对齐，然后已经在线上的内联级别框相应地移动到浮动的右侧（右侧是左侧浮动的另一侧），反之亦然，用于rtl和右侧浮动。

由于没有足够的空间在同一行上同时包含和 span个浮点数，因此强制将#p2推送到下一行，因为只有足够的空间来容纳#p1和span在第一行。

如果你对容器进行了足够的扩展，你会发现两个浮动都会出现在与span相同的行上。这里的关键是span必须尽可能高，因为它出现在浮点数之前，然后浮点数可能不高（这在section 9.5.1中提到）：

  

  
1. 元素浮动框的外部顶部可能不会高于包含由源文档中较早的元素生成的框的任何行框的顶部。
  

或者，如果您将span移动到容器的末尾，如下所示：

<div id="box1">
    <p id="p1">Paragraph 1</p>
    <p id="p2">Paragraph 2</p>
    <span>Box 1</span>
</div>

然后浮动将首先出现，span移动到下一行，因为没有足够的空间在与浮动相同的线上提供它。