White-space: nowrap vs white-space: normal 为什么对浮动元素的影响这么大？

Question

Definition from w3c： 正常 空白序列将折叠成一个空白。文本将在必要时换行。这是默认播放 » nowrap 空白序列将折叠成一个空白。文本永远不会换行到下一行。文本在同一行继续，直到遇到
标记。

那么为什么浮动元素的外观会有这么大的不同呢？

例如比较一下：

JsBin with white-space normal showing a nicely aligned layout

<table>
    <thead>
      <tr>
        <th>
          <div style="background-color: lightblue; width: 600px; white-space: normal;">
            <span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px;float: left;">
              Button
            </span>
            <span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px;float: none;">
              Button
            </span>
            <span style="display: inline-block; height:20px; background-color: red; margin: 5px 3px; float:right;">
              Button right
            </span>
            <div style="clear: both" />
        </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr><td>note: white-space is normal here</td></tr>
    </tbody>
  </table>

White this where white-space: nowrap is used

和上面的代码一样，只是这次 white-space: nowrap;

有人知道了吗？ [编辑] 正如人们评论的那样，他们看不出有什么区别，我上传了有问题的空白的屏幕截图：nowrap 我在 Firefox 10.0.4

Answer 1

我有点收回我上面最初的评论。如果您在 white-space: nowrap div 中有 divs floated 并且您的父 div 具有固定宽度，您会得到我在评论中提到的内容。但是，如果您的孩子是inline 或inline-block，那么那些孩子divs 将继续超出右侧overflow（就像内联文本所做的那样）。通常，当您float: left 时，子代到达父代的末尾并换行。

看看这个fiddle 插图。

Answer 2

white-space: nowrap 和 float: right 是 Firefox 的已知“错误”：https://bugzilla.mozilla.org/show_bug.cgi?id=488725

我在菜单中询问有关右对齐三角形的问题：Align to right "left triangle" in menu element。我准备使用padding-right、否定margin-left 和position: absolute 的修复程序。

Answer 3

我想添加这个 http://jsfiddle.net/cstephe/tNHLL/ 显示顺序如何在 Firefox 10 中也影响到这一点，至少当我回到家使用更新的版本时会检查这个。

编辑：这就是我在本地的样子。

 <h2>float first: nowrap / Children: floating blocks</h2>
<div class="wrapper nowrap">
     <div class="inlineBlock floating"></div>
     <div class="inlineBlock floating float-right">r</div>
     <div class="inlineBlock">something</div>

</div>
<div class="clearfix"></div>
<h2>typical order: nowrap / Children: floating blocks</h2>
<div class="wrapper nowrap">
     <div class="inlineBlock floating"></div>

     <div class="inlineBlock">something</div>
    <div class="inlineBlock floating float-right">r</div>
</div>