[TOC] >[info] 在了解浮動屬性之前，首先我們先了解一下行，塊和html中關于display屬性的相關知識 。 # 塊元素和行內元素 >[info] 我們已經學習了很多的HTML標簽，不同的標簽有不同的特性， 比如從文檔流的角度區分，那么標簽元素分為塊標簽與行標簽。 ## 塊元素 塊標簽即標簽元素是一個塊，即有寬、高屬性，同時塊標簽會獨 占一行，比如說H1～H6、P、li等標簽都是塊標簽，當然也包括 我們即將學習的DIV標簽。 ## 行內元素 行標簽正好與塊標簽意義相反，行標簽不具有寬、高特性，也不會占一行，所以我們 可以利用行標簽對文字進行區塊指定不同的CSS樣式達到不同的 效果，行標簽也很多，如`em`、`span`標簽等。 ## 行內塊級元素 * 既有行元素的屬性即:不會獨占一行 * 又有塊元素的屬性即：可以設置寬高 * Html中這種元素比較少 * 比如: 還有表單元素 >[danger]注意：所的標簽行，塊屬性都可以互相轉換。 # CSS display 屬性 >[danger]display 屬性規定元素應該生成的框的類型。 * `display: none`; 可以讓元素隱藏起來并且不占用 頁面空間,瀏覽器會完全忽略掉這個元素，該元素將不會被 顯示，也不會占據文檔中的位置 * `display:inline-block`;指定元素兼有塊級和行級元素的特性， 即在行內顯示但是可以設定寬高。注意：IE6不支持此屬性，但是有一些元素具有此屬性，比如:img\input。 * `display:inline`;塊元素轉為行元素。 * `display:block`行元素轉為塊元素。 ## 浮動float **浮動相關問題** * 可以改變普通文檔流的排列方式，可以使得塊元素在同一行中排列，使我們的布局更加的方便。多個盒子都浮動后，就產生了塊級元素水平排列的效果。 * 通過設置float屬性來完成另一種脫離文檔流的行為 就是浮動，分為左、右浮動。 * 浮動是脫離文檔流的，也就是其他元素視他不見。 * 多個浮動元素不會相互覆蓋。 * 若包含的容器太窄，無法容納水平排列的多個浮動元素， 那么最后的浮動盒子會向下移動,但如果浮動元素的高度不同，那當它們向下移動時可能會被卡住。 * 給一個元素設定了浮動屬性，最好給他設定寬高的值，否則有可能發生浮動錯位。 <table class="dataintable"> <tbody> <tr> <th> 值 </th> <th> 描述 </th> </tr> <tr> <td> <a>left</a> </td> <td> 元素向左浮動。 </td> </tr> <tr> <td> <a>right</a> </td> <td> 元素向右浮動。 </td> </tr> <tr> <td> <a>none</a> </td> <td> 默認值。元素不浮動，并會顯示在其在文本中出現的位置。 </td> </tr> <tr> <td> <a>inherit</a> </td> <td> 規定應該從父元素繼承 float 屬性的值。 </td> </tr> </tbody> </table> ## 浮動停止（clear 屬性） * 當遇到一個浮動元素后會停止 * 遇到父級元素后會停止 * 清除浮動（合理的布局，比較少用） <table class="dataintable"> <tbody><tr> <th>值</th> <th>描述</th> </tr> <tr> <td>left</td> <td>在左側不允許浮動元素。</td> </tr> <tr> <td>right</td> <td>在右側不允許浮動元素。</td> </tr> <tr> <td>both</td> <td>在左右兩側均不允許浮動元素。</td> </tr> <tr> <td>none</td> <td>默認值。允許浮動元素出現在兩側。</td> </tr> <tr> <td>inherit</td> <td>規定應該從父元素繼承 clear 屬性的值。</td> </tr> </tbody></table> **實例** 請看下圖，當把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：  再請看下圖，當框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。 如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。  如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”：  >[danger]**作業：**理解浮動的原理，選擇一個大型頁面，把整個頁面通過盒子色塊布局出來。