[CSS]CSS浮動float詳解（一）：標準文檔流

Web網頁的製作，是一個流，必須自上而下依次進行。 標準文檔流

流的比喻很形象，就像水流一樣，必須從上而下，像織毛衣一樣。
那麼究竟什麼是標準文檔流呢。在web中，標準文檔流有以下幾個特點：

高矮不齊，底邊對齊

自動換行
無論字型大小有多高，圖片大小有多高，底邊始終對齊，而且會自動換行。

空白摺疊現象

<p>我叫Feathers                                        <img src="me.png">，人生沒有什麼追求，只有一個 <span>學習</span>! <img src="zb.jpeg">學習讓我快樂!生命在於學習。一刻不學習就渾身難受。</p>

這串代碼是上方圖片中的文檔的原始碼，我們看到，我們無論在文檔中輸入多少空格或者是斷行符號，都會被摺疊為一個空格，這個現象稱作空白摺疊現象。 文本級標籤與容器級標籤

HTML將html標籤分為兩類，文本級和容器級。規定了標籤的作用，文本級標籤只能存放文本，而容器級標籤可以容納其他容器，也可以容納文本。

注意：文本不僅僅是只文字，圖片、連結等都是文本。所以，img標籤既不是文本級標籤，也不是容器級標籤。只是使用標籤的形式來表示圖片而已。

文本級標籤有：span,p,u,i,em,strong…
容器級標籤有：div,h,li,dt,dd… 區塊層級元素和行內元素

CSS將html元素分為兩種區塊層級元素和行內元素。通過display:inline/block給元素設定預設的樣式，最主要的區別在於，區塊層級元素占整行，而行內元素的寬度只會包裹內容。

行內元素 元素不能設定寬和高， 不能設定寬、高。預設的寬度，就是文字的寬度。 常見的行內元素有：span,u,i,em,strong…

區塊層級元素 霸佔一行，不能與其他任何元素並列 能接受寬、高 如果不設定寬度，那麼寬度將預設變為父容器的100%。 如果不設定高度，那麼高度預設為包裹內容，或者說容器內的孩子會將容器的高度撐起來 常見的區塊層級元素有：p,div,h,li,dt,dd… 注意p雖然是文本級元素，但它時區塊層級元素。

區塊層級元素和行內元素之間的轉換

因為行內元素和區塊層級元素之間各有各的特點，各有各的表達效果。通常，我們可能需要給span標籤設定一個寬和高，給讓div標籤並排，此時就需要使用到元素類型轉換。

我們可以通過display:block/inline設定元素的類型，從而達到我們想要的效果。