空白：nowrap 与空白：正常 为什么对浮动元素的影响如此之大？

来自w3c的定义 http://www.w3schools.com/cssref/pr_text_white-space.asp : normal空白序列将折叠成单个空白。必要时文本将换行。这是默认的 播放它 »nowrap空白序列将折叠成单个空白。文本永远不会换行到下一行。文本在同一行继续，直到
遇到标签。

那么为什么浮动元素的外观会有如此大的差异呢？

例如比较一下：

带有空白法线的 JsBin 显示了良好对齐的布局 http://jsbin.com/ibifoq/22/edit

<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-space: nowrap 的地方将其白色 http://jsbin.com/ibifoq/23/edit

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

someone got a clue? [EDIT] as people commented they can see no difference, I upload a screenshot of the problematic white-space: nowrap I'm on firefox 10.0.4

我在某种程度上收回了我上面最初的评论。如果你有divs float编辑在一个white-space: nowrap div和你的父母div有固定的宽度，你会得到我在评论中提到的内容。但是，如果您的孩子是inline or inline-block那么那些孩子divs 会继续超出右侧overflow（就像内嵌文本所做的那样）。通常，当您float: left子级到达父级的末端并换到另一条线上。

看看这个fiddle http://jsfiddle.net/scrimothy/e6rbk/1/插图。