一、浮動（float）
1、CSS布局的三種機制
（1）網頁布局的核心——就是用CSS來擺放盒子
CSS提供了3種機制來設置盒子的擺放位置，分別是普通流（標准流）、浮動和定位
①普通流（標准流）
●塊級元素會獨占一行，從上到下順序排列；
○常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
●行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則會自動換行；
○常用元素：span、a、i、em等
②浮動
讓盒子從普通流中浮起來，主要作用讓多個塊級盒子一行顯示。
③定位
將盒子定在瀏覽器的某一個位置——CSS離不開定位，特別是后面的js特效。
2、為什么需要浮動？
①雖然前面學過行內塊（inline-block）但是它卻有自己的缺陷：
●可以實現多個元素一行顯示，但是中間會有空白縫隙，不能滿足三個盒子並排緊靠在一行的要求；
●不能實現一行內兩個盒子一個靠左，一個靠右的要求，盒子左右對齊。
②因為一些網頁布局要求，標准流不能滿足我們的需求了，因此我們需要浮動來完成網頁布局。
3、什么是浮動（float）
①概念：元素的浮動是指設置了浮動屬性的元素會
●脫離標准普通流的控制，
●移動到指定位置
②作用
●讓多個盒子（div）水平排列成一行，使得浮動成為布局的重要手段；
●可以實現盒子的左右對齊等等；
●浮動最早是用來控制圖片，實現文字環繞圖片的效果
③語法
在CSS中，通過 float 中文，浮 漏 特 屬性定義浮動，語法如下：
選擇器 { float: 屬性值; }
| 屬性值 | 描述 |
| none | 元素不浮動（默認值） |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
④浮動口訣
通過 float——浮 漏 特
●浮動口訣之浮
○浮動——浮~浮~浮~~~漂浮在普通流的上面，脫離標准流，俗稱“脫標”
○float 屬性會讓盒子漂浮在標准流的上面，所以第二個標准流的盒子跑到了浮動盒子的底下了
●浮動口訣之漏
○浮動——漏~漏~漏~ 浮動的盒子，把自己原來的位置漏給下面標准流的盒子，就是不占有原來的位置，是脫離標准流的，我們俗稱“脫標”。
○所以，box2下面的其實就是跑到box1盒子下面了，被box1給壓住了，遮擋起來了
●浮動口訣之特
○浮動——特性 float屬性會改變元素display屬性
○任何元素都可以浮動，浮動元素會生成一個塊級框，而不論它本身是何種元素，生成的塊級框和我們前面的行內塊極其相似
●
注意：浮動的元素是互相貼靠一起的，但是如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊。
4、浮動（float）小結
我們使用浮動的核心目的——讓多個塊級盒子在同一行顯示。因為這是我們最常見的一種布局方式。
float——浮漏特
| 特點 | 說明 |
| 浮 | 加了浮動的盒子是浮起來的，漂浮在其他標准流盒子的上面 |
| 漏 | 加了浮動的盒子是不占位置的，它原來的位置漏給了標准流的盒子 |
| 特 | 特別注意：浮動元素會改變display屬性，類似轉換為了行內塊，但是元素之間沒有空白縫隙 |
5、浮動（float）的應用（重要）
（1）、浮動和標准流的父盒子搭配
①我們知道，浮動是脫標的，會影響下面的標准流元素，此時，我們需要給浮動的元素添加一個標准流的父親，這樣，最大化的減少了對其他標准流的影響。
②一個完整的網頁，是 標准流 + 浮動 + 定位 一起完成的。
（2）、實際重要的導航欄中，我們不會直接用鏈接 a 而是用 li 包含鏈接（li+a）的做法。
① li + a 語義更清晰，一看這就是有條理的列表型內容；
②如果直接用 a ，搜索引擎容易辨別為有堆砌關鍵字嫌疑（故意堆砌關鍵字容易被搜索引擎有降權的風險），從而影響網站排名。
6、浮動（float）的拓展
（1）浮動與父盒子的關系
①子盒子的浮動參照父盒子對齊；
② 不會與父盒子的邊框重疊，也不會超過父盒子內邊距。
（2）浮動元素與兄弟盒子的關系
在一個父級盒子中，如果前一個兄弟盒子是：
①浮動的，那么當前盒子會與前一個盒子的頂部對齊；
②普通流的，那么當前盒子會顯示在前一個兄弟盒子的下方。
●浮動只會影響當前的或者是后面的標准流盒子，不會影響前面的標准流。
●建議：如果一個盒子里面有多個子盒子，如果其中一個盒子浮動了，其他兄弟也應該浮動，防止引起問題.
二、清除浮動
1、為什么要清除浮動
（1）因為父級盒子在很多情況下，不方便給高度，但是子盒子浮動就不占有位置，最后父級盒子高度為0，就影響下面的標准流盒子。
（2）總結：
①由於浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產生影響；
②准確來說，並不是清除浮動，而是清除浮動后造成的影響。
2、清除浮動本質
清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0的問題。
3、清除浮動的方法
●清除浮動之后，父級就會根據子盒子自動檢測高度。父級有了高度，就不會影響下面的標准流了。
●在CSS中，clear屬性用於清除浮動。
●語法：
選擇器 { clear : 屬性值 ; } clear 清除
| 屬性值 | 描述 |
| left | 不允許左側有浮動元素（清除左側浮動影響） |
| right | 不允許右側有浮動元素（清除右側浮動影響） |
| both | 同時清除左右兩側浮動的影響 |
我們在實際工作中，幾乎只用clear：both；
（1）額外標簽法（隔牆法）
●是W3C推薦的做法，是通過在浮動元素末尾添加一個空的標簽 例如 <div style="clear: both;"></div>，或者其他標簽 br 等亦可；
●優點：通俗易懂，書寫方便；
●添加了許多無意義的標簽，結構化較差。
（2）父級添加overflow屬性方法
●可以給父級添加： overflow 為 hidden | auto |scroll 都可以實現；
●優點：代碼簡潔；
●缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。
（3）使用after偽元素清除浮動
①:after 方式為空元素額外標簽法的升級版，好處是不用單獨加標簽了
②使用方法：
●優點：符合閉合浮動思想，結構語義化正確；
●缺點：由於IE6-7不支持:after，使用zoom:1 觸發hasLayout；
●代表網站：百度、淘寶網、網易等。
（4）使用雙偽元素清除浮動
①使用方法：
②
●優點：代碼更簡潔；
●缺點：由於IE6-7不支持:after，使用zoom:1 觸發hasLayout；
●代表網站：小米、騰訊等。
4、清除浮動總結
（1）什么時候使用清除浮動？
①父級沒高度；
②子盒子浮動了；
③影響下面布局了，我們就應該清除浮動了。
（2）
| 清除浮動的方法 | 優點 | 缺點 |
| 額外標簽法（隔牆法） | 通俗易懂，書寫方便 | 添加了許多無意義的標簽，結構化較差 |
| 父級overflow:hidden; | 書寫簡單 | 溢出隱藏 |
| 父級偽元素 | 結構語義化正確 | 由於IE6-7不支持:after，兼容性問題 |
| 父級雙偽元素 | 結構語義化正確 | 由於IE6-7不支持:after，兼容性問題 |