1.2 浮動(float)小結
1.3 浮動(float)的應用（重要）
1.4 浮動(float)的擴充套件
2. 清除浮動
2.4 清除浮動總結
概念：元素的浮動是指設定了浮動屬性的元素會
脫離標準普通流的控制
移動到指定位置。 作用
讓多個盒子(div)水平排列成一行，使得浮動成為布局的重要手段。
可以實現盒子的左右對齊等等…
浮動最早是用來控制，實現文字環繞的效果。 語法
在 css 中，通過float中文， 浮 漏 特 屬性定義浮動，語法如下：
選擇器描述none元素不浮動（預設值）
left元素向左浮動
right元素向右浮動
1). 浮動口訣之 浮
浮動——浮浮浮~~~漂浮在普通流的上面。 脫離標準流。 俗稱 「脫標」
小結：
2). 浮動口訣之 漏
浮動——漏漏漏~ 浮動的盒子，把自己原來的位置漏給下面標準流的盒子，就是不占有原來位置，是脫離標準流的，我們俗稱 「脫標」。
.box1
.box2
來來來，我們看個立體圖
3). 浮動口訣之 特
浮動——特性 float屬性會改變元素display屬性。
任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。 生成的塊級框和我們前面的行內塊極其相似。
體驗案例——div 水平排列
注意： 浮動的元素互相貼靠一起的，但是如果父級寬度裝不下這些浮動的盒子， 多出的盒子會另起一行對齊
我們使用浮動的核心目的——讓多個塊級盒子在同一行顯示。 因為這是我們最常見的一種布局方式float——浮漏特特點
說明浮加了浮動的盒子是浮起來的，漂浮在其他標準流盒子的上面。
漏加了浮動的盒子是不佔位置的，它原來的位置漏給了標準流的盒子。
特特別注意：浮動元素會改變display屬性， 類似轉換為了行內塊，但是元素之間沒有空白縫隙
浮動和標準流的父盒子搭配
我們知道，浮動是脫標的，會影響下面的標準流元素，此時，我們需要給浮動的元素新增乙個標準流的父親，這樣，最大化的減小了對其他標準流的影響。
我們老師說：
乙個完整的網頁，是 標準流 + 浮動 + 我們後面要講的定位 一起完成的。注意，實際重要的導航欄中，我們不會直接用鏈結a 而是用 li 包含鏈結(li+a)的做法。
li+a 語義更清晰，一看這就是有條理的列表型內容。
如果直接用a，搜尋引擎容易辨別為有堆砌關鍵字嫌疑（故意堆砌關鍵字容易被搜尋引擎有降權的風險），從而影響**排名
1). 浮動元素與父盒子的關係
2). 浮動元素與兄弟盒子的關係
在乙個父級盒子中，如果前乙個兄弟盒子是：
注意：
浮動只會影響當前的或者是後面的標準流盒子，不會影響前面的標準流。建議：如果乙個盒子裡面有多個子盒子，如果其中乙個盒子浮動了，其他兄弟也應該浮動。防止引起問題因為父級盒子很多情況下，不方便給高度，但是子盒子浮動就不占有位置，最後父級盒子高度為0，就影響了下面的標準流盒子。
清除浮動本質：
清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。清除浮動之後， 父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了
在css中，clear屬性用於清除浮動，在這裡，我們先記住清除浮動的方法，具體的原理，等我們學完css會再回頭分析。
屬性值選擇器 clear 清除描述left
不允許左側有浮動元素（清除左側浮動的影響）
right
不允許右側有浮動元素（清除右側浮動的影響）
both
同時清除左右兩側浮動的影響
但是我們實際工作中， 幾乎只用 clear: both;
1).額外標籤法(隔牆法)
優點： **簡潔是w3c推薦的做法是通過在浮動元素末尾新增乙個空的標籤例如style
=」clear:both」
>
div>
，或則其他標籤br等亦可。2).父級新增overflow屬性方法
可以給父級新增： overflow為 hidden| auto| scroll 都可以實現。
缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素。
3).使用after偽元素清除浮動
:after 方式為空元素額外標籤法的公升級版，好處是不用單獨加標籤了
使用方法：
4).使用雙偽元素清除浮動.clearfix:after.clearfix
/* ie6、7 專有 */
使用方法：
我們以後什麼時候用清除浮動呢？父級沒高度.clearfix:before,.clearfix:after.clearfix:after
.clearfix
子盒子浮動了
影響下面布局了，我們就應該清除浮動了。
清除浮動的方式
優點缺點
額外標籤法（隔牆法）
通俗易懂，書寫方便
新增許多無意義的標籤，結構化較差。
父級overflow:hidden;
書寫簡單
溢位隱藏
父級after偽元素
結構語義化正確
由於ie6-7不支援:after，相容性問題
父級雙偽元素
結構語義化正確
由於ie6-7不支援:after，相容性問題
清除浮動建議使用後面兩種方法！！
CSS筆記 浮動和布局 清除浮動
網頁布局的本質 用css來擺放盒子。用盒子進行排序 普通流 標準流 浮動定位 標籤按照預設規定好的方式排列 塊級元素會獨佔一行，從上向下順序排列。常用元素有 div,hr,p,h1 h6,ul,ol,dl,form,table 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。常用元素...
浮動 清除浮動 盒子布局
div table,td table,td 單獨設定表的左和上邊框,然後設定td的右和下邊框,也可以避免重複問題 table td.a aa hover ddiv div a1.a2 sup sub father big small footer clear father big small foo...
CSS之清除浮動
標籤可以是div br hr 在浮動元素後使用乙個空元素如 並在css中賦予.clear屬性即可清理浮動。亦可使用 或來進行清理。優點 簡單，少，瀏覽器相容性好。缺點 需要新增大量無語義的html元素，不夠優雅，後期不容易維護。在浮動元素下加 clear，但是在ie6下，塊元素有最小高度，即當hei...