普通文檔流的數字串遇到浮動塊為什麼不自動換行而是直接流到浮動塊底部的一行？

01-14

代碼和運行結果如圖，原諒我實在找不出能描述這個問題的話語。

我在兩個平級的段落里分別加入內容，讓第一段浮動，第二段輸入普通文本表現正常，但是當有一串數字且長度超過段落長度時就會發生這樣，想不出原因

CSS的Float之一_float 教程_w3cplus

CSS的Float之二_float 教程_w3cplus

float深入剖析_float 教程_w3cplus

float是如何工作的_CSS, float 教程_w3cplus

Clear Float_CSS, float, clearfix 教程_w3cplus

瀉藥

浮動框出於包含塊與行框之間

行框由行內框組成

中文與數字組成了一個匿名行內框

該框超過行框寬度

如行內框可被打斷將打斷後折行

形成新的匿名行內框

中文字元可以在字間折斷

（取決於break相關樣式設置，這裡顯然是默認）

所以不會超出行框造成行框重疊浮動框這種反規範布局

折行後的匿名行內框包含剩餘中文與部分無間隙數字

組成的行內框依然超出行框寬度

但是由於之前字間折斷規則緣故

無間隙的數字（因為break相關樣式設置）無法從中截斷

只得從中文字元可扯斷最大位置折斷

產生新的行內匿名框

該框依然超出行框

為了符合規範浮動框出於包含塊與行框之間的規定

此匿名行內框只好下沉到不予浮動框交疊的行框中渲染

即如你所示效果

word-wrap - CSS

雖然不知道規範，但是出現這個問題的原因大概是數字和單詞是一個整體過長不會自動換行，而中文每個字都不相關，可以自己換行。