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

Question

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

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

例如比较这个：

带有空白法线的 JsBin 显示了很好的对齐布局

<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>

白色 this where white-space: nowrap 被使用

它与上面的代码相同，只是这次 white-space: nowrap;

有人有线索吗？ [编辑] 人们评论说他们看不出有什么区别，我上传了有问题的空白的屏幕截图：nowrap 我在 firefox 10.0.4

Answer 1

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

看看这个小提琴插图。

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>