CSS浮动逻辑（内部文本未移动）

Question

我想知道浮动逻辑。 请参阅下面的代码。

<div style="width:300px;height:100px;border:1px solid gray;">
    <div style="width:50px;height:50px;float:left;border:1px solid gray">a</div>
    <div style="width:25px;height:25px;background:blue">b</div>
</div>

结果

http://jsfiddle.net/5ccLv2tb/

我可以理解蓝框移动到0前0的逻辑。 但为什么内部文本（b）没有移动？

Answer 1

基本上发生的事情是你的第二个内部div，一个有蓝色背景和字母＆＃34; b＆＃34;因为它的内容不够宽，内容不能保留在你创建的块的边界内，所以它被推到浮动的div下面，几乎就像clear属性设置为left或两者一样。

W3 states：

  

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

...进一步

  

如果缩短的行框太小而无法包含任何内容，那么   线框向下移动（并重新计算其宽度），直到任何一个   一些内容适合或没有更多的浮动存在。任何内容   浮动框之前的当前行在同一行中重排   浮子的另一面。换句话说，如果是内联级别的框   在遇到适合的左浮动之前放置在线上   剩下的行框空间，左边的浮动放在那行上，   与行框顶部对齐，然后是内联级别框   已经在线上相应地移动到浮动的右侧   （右边是左边浮动的另一边），反之亦然   rtl和右浮动。

     

表的边框，块级替换元素或   正常流程中建立new block formatting context的元素（例如，除了＆＃39;溢出＆＃39;除了＆＃39;可见＆＃39;之外的元素）必须   不与同一块格式中任何浮点数的边距框重叠   上下文作为元素本身。如有必要，实施应该   通过将所述元素置于任何前面的浮动下方来清除所述元素，但是   如果有足够的空间，可以将它放在这些浮子附近。   它们甚至可能使所述元素的边框变窄   由section 10.3.3定义。 CSS2没有定义UA何时可以说出来   浮动旁边的元素或所述元素可能变成多少   窄。

你可以看到，如果蓝色背景的第二个内部div更宽，say about 60px，那么浮动div右边的内容网站就是通常所期望的。

示例即可。在下面的文档片段中，包含块太窄而不能包含浮点数旁边的内容，因此内容将根据text-align属性移动到浮点数下方，浮点数在行框中对齐。

p { width: 10em; border: solid aqua; }
span { float: left; width: 5em; height: 5em; border: solid blue; }

<p>
  <span> </span>
  Supercalifragilisticexpialidocious
</p>

此片段可能如下所示：

Answer 2

蓝框是block level框，其位置由以下内容解释：

  

由于浮动不在流中，因此在浮动框之前和之后创建的非定位块框垂直流动，就像浮动不存在一样。

（http://www.w3.org/TR/CSS21/visuren.html#floats）

文字＆＃34; b＆＃34;是一个line box或一行文本，这意味着它将在正常情况下围绕浮动流动：

  

当存在满足所有这四个条件的垂直位置时，线框位于浮点旁边：（a）位于线框顶部或下方，（b）位于线框底部或上方，（c）位于浮标的上边缘以下，及（d）位于浮标的下边缘之上。

（http://www.w3.org/TR/CSS21/visuren.html#floats）

如果我们删除示例中的width限制，则可以看到这一点：

＆＃13;

＆＃13;

<div style="width:300px;height:100px;border:1px solid gray;">
    <div style="width:50px;height:50px;float:left;border:1px solid gray">a</div>
    <div style="height:25px;background:blue">b</div>
</div>

＆＃13;

＆＃13;

＆＃13;

但是，由于您为蓝色框提供了width，因此显而易见：

  

如果缩短的行框太小而无法包含任何内容，则行框向下移动（并重新计算其宽度），直到某些内容适合或不再存在浮动。

（http://www.w3.org/TR/CSS21/visuren.html#floats）

由于文本没有空间与浮动元素一起流动，因此它会被推到它下面。它似乎与蓝色框断开连接，因为其尺寸已受到限制，默认情况下overflow设置为visible。

从示例中删除height限制将显示蓝框通常如何扩展以适合文本：

＆＃13;

＆＃13;

<div style="width:300px;height:100px;border:1px solid gray;">
    <div style="width:50px;height:50px;float:left;border:1px solid gray">a</div>
    <div style="width:25px;background:blue">b</div>
</div>

＆＃13;

＆＃13;

＆＃13;