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

這是相同的代碼上面，只是這一次的空白：NOWRAP;

有人有線索？ [編輯] 人們評論說，他們看不出有什麼區別，我上傳的問題空白的屏幕截圖：NOWRAP 我在Firefox 10.0.4

Answer 1

我有點收回上述我的初步意見。如果你在white-space: nowrap div裏有div s float，並且你的父母div有固定的寬度，你會得到我在我的評論中提到的。但是，如果您的孩子是inline或inline-block那麼那些孩子divs只會繼續超越右邊overflow（就像內聯文本會做什麼）。通常，當你float: left孩子到達父母的盡頭，幷包裝到另一行。

看看這個fiddle插圖。

Answer 2

我想補充說明http://jsfiddle.net/cstephe/tNHLL/顯示了在Firefox 10中，order是如何影響這個的，至少我會在更新版本中回家時檢查這個。

編輯：這是它如何看起來對我本地。

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

Answer 3

white-space: nowrap和float: right被稱爲火狐的 「錯誤」：https://bugzilla.mozilla.org/show_bug.cgi?id=488725

我問在菜單右對齊三角問題：Align to right "left triangle" in menu element。我準備修復使用padding-right，負面margin-left和position: absolute。