白色空间：nowrap vs white-space：正常为什么对浮动元素的影响如此之大？

Question

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

那么为什么它会对浮动元素的外观产生如此大的影响呢？

e.g。比较一下：

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

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

查看此fiddle插图。

Answer 2

white-space: nowrap和float: right已知＆＃34; bug＆＃34; 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>