在css的學習中，浮動可以說是非常重要的，當然重點既是難點，所以做了一篇對浮動的總結，希望看后對你有些幫助。
（一）使用浮動的原因
我們都知道css將我們熟知的標簽分為了兩種：1.塊級元素；2.行級元素；並且規定了快級元素獨占一行，而行級元素不能設置寬高，他的寬高只能有里面的內容撐出。這是css標准文檔流中一些規定。那么當我們想給行級元素設置寬高時，就顯得無助了，當然我們可以通過display:block;來把行級元素轉行為塊級元素，這個是可以的，那它轉換之后又會收到塊級規定的限制。所以最好的辦法就是掙脫標准文檔流的限制，這就是我們常說的脫標。常用的脫標有三種手段：1.浮動；2.絕對定位；3.固定定位。
使用浮動的原因就是脫離標准文檔流的控制，脫標后的元素不在有塊級和行級之分了，你可以隨意設置寬高級其他的樣式了。
（二）浮動元素的特點
1.貼靠
所謂貼靠，就是說當有連續浮動的元素時，下一個浮動的元素會自動貼近前一個浮動的元素，如果前一個未浮動，就會貼近左上角。舉個例子：
圖中出現了貼靠特性，1貼近了左上角，2貼近1，3貼近2.這個浮動貼靠很好理解。
2. “字圍”效果
“字圍”顧名思義，就是實現文字環繞效果，文字包圍的可以是一張圖或者其他的什么東西。
在這里我要指明一點的是 ；我們讓div浮動，文字並未出現在圖片的下方，被圖片遮蓋，而是按照標准文本流排列，這是因為浮動只是擋住了標簽p，而不能擋住文本中的內容；還有就是“字圍“效果只對漢子有效果，對於字母和數字沒有效果的,這一點一定要記清楚。這段標注的文字是我說的不正確的，在評論區里說的是字母是按照空格鍵作為結束的，所以英文字母也會出現“字圍”效果。。。。謝謝博友的指正。。。。
3.收縮
一個浮動元素如果沒有設置寬度，那么就會自動收縮到文字的寬度。
說完了浮動元素的特點，接下來說說清除浮動的方法吧，（ps：真是無語了，好不容易浮動了，還要想辦法清除，鬧心）
（四）清除浮動
總的來說清除浮動總共有4種方法：1.給浮動元素的祖先元素增加高度；2.使用clear：both；屬性；3.隔牆發；4.使用overflow：hidden；屬性。而我們要清除的影響主要是浮動元素的相互貼靠的特點；
1.給浮動元素的祖先元素增加高度
如果已經浮動的祖先元沒有增加高度，那么我們的這個浮動就會影響到下一個元素的浮動，這是因為浮動的貼靠的特點。
圖中因為我們沒有給父元素增加高度，出現的貼靠的問題，再看看增加高度之后：
增加高度之后，就不會出現貼靠的問題了，但是在實際中我們不建議使用這種辦法來清除浮動。
2.使用clear：both;
使用clear：both;來清除浮動有一個問題就是margin的作用失效，浮動元素會上下貼靠在一起。而且不能通過margin調節；
要說的是clear：both；是清除其他浮動元素對我的影響，寫在我的內部，而不是我的其他元素的內容里，這要記好，不然會和第三種方法記混的。圖中可以看出，兩個浮動元素上下緊緊連在一起，沒有辦法了，margin失效了。那么這個的使用效果也就不好了，也不建議使用。因為這個問題，就出先了隔牆法。
3.隔牆法
因為使用clear：both；那個外邊距失效的問題存在，隔牆法實用性就顯得非常方便了。所謂隔牆法，就是說在浮動元素之間增加一道牆，隔開浮動元素。
這是隔牆法中的外牆法，當然，我們可以通過改變外牆的高度來調節上下的距離了。接下來是內牆法。這個實用的范圍很廣，也是常用的清除浮動的辦法。
外牆法和內牆法的區別：
1.二着所處的位置不同；
2.二者增加的高度的計算方式不用；（不要深究）
對於隔牆法，記着他的使用方法就可以了，至於原理可以簡單了解，不必深究了。再有就是最后一種辦法。
4.overflow：hidden；
overflow：hidden；就是溢出隱藏的意思，那么他是怎樣來解決浮動的問題的那？？
我們來看看overflow：hidden的特點：
可以看出，當我們增加這個屬性時，父元素會選擇子元素中高度最大的那個元素的高作為容器的高。這樣我們也就為父元素增加了高度了，當然可以困住已經浮動煩人元素了。
總的來說元素浮動是學習css的重中之重，是學習好css的關鍵，希望我的這些小看法，對你的學習有所幫助。。。