先了解一下文件流的概念，所謂文件流，就是指文件中可以顯示的物件在排列是所佔的位置。而浮動就是**使我們的元素脫離正常文件流，按照指定方向發生移動，直到碰到它的父元素邊界或另乙個浮動元素的邊界（浮動是讓元素水平方向移動，不能上下移動）**
浮動屬性
float:left; 左浮動
float:right; 右浮動
float:none; 不浮動（預設樣式）
浮動特性
1.元素加完浮動後脫離正常文件流。
2.會提高元素層級。
3.使塊級元素由內容撐開，如果浮動元素寬度之和超過父元素的寬度，會自動折行。
4.使行級元素可以設定寬高。
5.元素浮動不佔位，會導致父盒元素高度為0.（高度塌陷，下文會介紹解決方法）
設定浮動之前
我是子盒1
我是子盒2
未設定浮動之前不難看出，div為塊級元素，預設寬度撐滿整個父元素，高度由內容撐開。
設定浮動之後
我是子盒1
我是子盒2
設定浮動屬性之後，塊級元素由內容撐開，寬度不再預設撐滿父元素。
上文講述浮動特性時，提到設定浮動後，會造成父盒子的高度塌陷，變成了0，影響與父盒子同級的其他後續元素的正常布局。那麼清浮動的常用方法有哪些呢？下面是我整理的一些清浮動的常用方式以及弊端，各位可根據自身情況選擇。
清浮動方法1：給浮動元素父盒子設定固定高
如圖：
優點：簡單直接解決問題；
缺點：此方法不夠靈活，適用於高度固定的布局。
清浮動方法2：給浮動元素父盒子也新增乙個浮動
如圖：
優點：簡單直接；
缺點：會產生新的浮動，造成新的高度塌陷。
清浮動方法3：給浮動元素父盒子新增乙個overflow屬性，屬性值可以是 hidden/scroll/auto
如圖：
優點：**整潔；
缺點：可能會導致內容顯示不完全。
清浮動方法4：在浮動元素之後與浮動元素呈現並列關係的位置加上乙個空的div（div本身不浮動，沒有尺寸），在空的div上加屬性：clear:both;
如圖：
如圖：
CSS 清浮動 相關方法
示例 1 lang en charset utf 8 documenttitle type text css imgstyle head 浮動使父級標籤塌陷 src img small.gif alt div body html 示例 2 lang en charset utf 8 document...
清浮動方法
1.加高 問題 擴充套件性不好 2.父級浮動 問題 頁面中所有元素都加浮動，margin左右自動失效 floats bad 3.inline block 清浮動方法 問題 margin左右自動失效 4.空標籤清浮動 問題 ie6 最小高度 19px 解決後ie6下還有2px偏差 5.br清浮動 問題...
浮動及清浮動的方式
浮動的特點 1.使塊元素在同一行顯示 2.使內嵌支援寬高 3.不設寬高則由內容撐開 4.脫離文件流，按照指定的乙個方向去移動，直到碰到父級的邊界或者另外乙個浮動元素停止 5.提公升層級半層，元素可以分為上下兩層，下層是具有樣式的元素本身，上層是元素裡的內容，浮動只浮動了半層。所以另乙個元素擠進來的時...