前段時間偷懶了好久.....內心很不安，我要加快速度了，吼吼吼
今天來說說float box的文字圍繞現象。
下面的排版，想必從事前端開發的童鞋都很熟悉吧。
文字很配合的圍繞在旁邊，沒有上浮，也沒有下移，這究竟是為什麼呢？讓我們來一探到底吧！
我們常常看到一堆文字圍繞著float box，大家有沒有想過這些文字對應的是哪種box ? 要知道，網頁都是由css box 拼成的！
根據普通流，浮動及絕對定位這三種定位，可知，box有三類：普通流中的box 、 float box 及 absolutely positioned box，而普通流中的box又分：inline box（
看第18條）, 非inline box的inline-level box（
看第20條）, block-level box（
看第21條）。試想下，如果這些box均包含文字，這些文字都可以圍繞在float box旁邊嗎？
非也！首先，排除absolutely positioned box。因為在定位機制中，absolutely positioned box級別高於float box，一旦box為absolutely positioned，則float屬性值不管人為設定成什麼都會被解析為none。
其次，排除float box。所有float box均會盡可能的向左或向右浮動，不可能圍繞在某個float box旁邊，當然，幾個float box並行排列的情況是有的，但不能算是圍繞。
最後，剩下的皆有可能。這包括inline box, 非inline box的inline-level box, block-level box。
我們知道float box是先出現在普通流中，然後再脫離普通流向左或向右浮動。它的行為類似於非inline box的inline-level box，只不過它具有浮動功能，並且可以與普通流中的任意box並行排列。這種並行排列造就了圍繞現象！
當然，對於不同型別的box，圍繞過程卻是各有各的風采！
這個box比較特殊，它是以單個文字的形式參與到inline formatting context中的。什麼是單個文字，"oh, my god"不是單個文字，"oh"是單個文字。這種特殊的參與形式決定了inline box可以跟隨containing block(看第11條)的寬度變形，以"oh, my god"為例，變化如下：
知道了這些，我們就好理解inline box是如何去包圍的了。
例一 inline box在float box之前
'parent'>
i'm inline element. i'm inline element. i'm inline element. i'm inline element. i'm inline element.
float-child'>
複製**
在瀏覽器上測試如下：
因為inline box在float box之前，故渲染的時候它依然在前面，每個line box(看第16條)排滿文字後，後面的文字自動排在下乙個line box中，直至inline box中的文字都被排完。那麼，就存在最後乙個line box佔不滿一整行的情況。等到放置float box時，秉著「盡可能高」的原則，如果line box留下的橫向空間足以放置float box，float box就會與最後乙個line box同行，並按float屬性指定的方向過去；如果空間不足，float box就會下移到該line box的下方，如同下圖。
例二 inline box在float box之後
'parent'>
'float-child'>
i'm inline element. i'm inline element. i'm inline element. i'm inline element. i'm inline element. i'm inline element. i'm inline element. i'm inline element. i'm inline element.
複製**
瀏覽器上顯示為：
因為float box在inline box的前面，所以它會先佔據一塊空間。在左邊有float box佔據的情況下，line box的寬度為 containing block的寬度 — float box的寬度；一旦float box沒有佔據橫向空間了，line box的寬度即為containing block的寬度。而inline box中的文字會依次排在這些line box中，乙個line box排不滿，換行到下乙個line box中。
對應的box圖如下：
該box的行為與inline box類似，只不過它是以乙個整體的形式參與到inline formatting context中。這就意味著，它能否圍繞float box取決於containing block的寬度是否足夠放置float box和它本身。
例三 containing block的寬度足夠
'parent'>
'normal-child'>i'm first inline-level box, but not a inline box.
normal-child'>i'm second inline-level box, but not a inline box.
'normal-child'>i'm third inline-level box, but not a inline box.
float-child'>
複製**
瀏覽器上顯示如下：
上圖中，三個span元素會產生三個非inline box的inline-level box，第二個box不足以放到第乙個box之後，於是，它下移到第乙個box下方，同理第三個box。接著，因為float box是排在第三個box後面，且第三行橫向空餘空間足夠放置float box，故float box會與第三個box同行，並向左浮動。
如果此時做點改動，在浮動元素後面再放置兩個同樣的span，會是什麼情況呢？
修改部分css**：
.parent複製**修改body內容如下：
'parent'>
'normal-child'>i'm first inline-level box, but not a inline box.
normal-child'>i'm second inline-level box, but not a inline box.
'normal-child'>i'm third inline-level box, but not a inline box.
float-child'>
normal-child'>i'm forth inline-level box, but not a inline box.
'normal-child'>i'm fifth inline-level box, but not a inline box.
複製**
效果如下：
修改之後，文字完美的包圍了float box。對於第四個inline-level box，如果float box不存在，它會緊挨著第三個inline-level box上下排列。 但現在前方橫空殺出了乙個float box，還慷慨的給了它足夠地盤，故它會與float box並行排列。對於第五個inline-level box，它眼前是無任何阻擋，故會沿著containing block的左邊緣排列。
例四 containing block的寬度不足
在containing block寬度不足的情況下，float box與非inline box的inline-level box是不能並行排列的，它們只存在上下的關係。
'parent'>
'normal-child'>i'm inline-level box in front of float, but not a inline box.
float-child'>
normal-child'>i'm inline-level box after float, but not a inline box.
複製**
效果如下：
上例中，第乙個span產生的box渲染之後，只剩下500-400 = 120px的空間，不足以放置float box，float box下移，佔據120px的空間，待第二個span產生的box渲染時，由於只剩下500-120 = 380px的空間，不足以放置而下移到float box之下。
對比inline box及非inline box的inline-level box，我們發現，它們其實很相似，唯一的不同點在於參與inline formatting context的形式不同，乙個是裡面的單個文字參與，乙個是整體參與，除非containing block的寬度不足，否則頁面的效果是一樣的。
還有個block-level box，又是個複雜的料，先寫到這吧，下篇接著講！
ps: 本文例子均是在chrome 49.0上測試。
The HTML Language 二 文字標誌
後面的標誌 對 未經特別說明，均用在 之間1.標誌對是用來建立乙個段落 段與段之間空一行 在此標誌對之間加入的文字將按照段落的格式顯示在瀏覽器上 標誌還可以使用 align 屬性，它用來說明對齊方式 格式 left 左對齊center 居中right 右對齊2.是乙個很簡單的標誌，它沒有結束標誌，它...
二 文字提取 機器學習
英文提取步驟 準備句子 例項化countvectorizer 講分詞結果變成字串當做fit transform的輸入值 示例 from sklearn.feature extraction import dictvectorizer from sklearn.feature extraction.t...
Tensorflow入門（二）文字自動生成
參考 簡單粗暴tensorflow class dataloader def init self path tf.keras.utils.get file nietzsche.txt origin with open path,encoding utf 8 as f 檔案的安全開啟方式，避免讀寫異常...