css - 空白 : nowrap vs white-space: normal why is the effect on floating elements so big?

Question

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

那么为什么 float 元素的外观会有如此大的不同呢？

例如比较一下:

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 我在火狐 10.0.4

Answer 1

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

看看这个 fiddle插图。