因為float被設計出來的初衷是用於——文字環繞效果。即，乙個一段文字，float:left之後，文字會環繞。
阿斯利康大家啊勝利大街拉速度來喀什建檔立卡結算單2.1. 破壞性
首先大家來看兩個demo，如下圖。第乙個demo是乙個簡單不過的例子，顯示效果也很正常。第二個demo，唯一的區別就在於
加了float:left，上層的卻出現了「坍塌」現象。
不過，這就是float的「破壞性」——float破壞了父標籤的原本結構，使得父標籤出現了坍塌現象。導致這一現象的最根本原因在於：被設定了float的元素會脫離文件流。
初次接觸「脫離文件流」的朋友可以這樣理解：div是父親，img是它的兒子，原本好好的父子關係，原本爺倆可以體面的展示乙個包含關係的效果。直到有一天，img被設定了float。老天爺（瀏覽器）規定，任何float元素都不允許再呆在自己的家族中，於是img被逐出家門，斷絕和div父子關係。於是乎，div沒有了img兒子，也就不能再展示這種父子的包含關係，於是兩者就各過各的，互不相干。——這樣一說，容易理解了吧？
但是，永遠都不要忘記float被設計的初衷——實現文字環繞效果。當div中有文字時，文字還是會環繞在img周圍的。如下圖：文字環繞後又把父元素撐起來了
為什麼會被設計成具有破壞性，為什麼會脫離文件流？這一點非常重要！其實原因非常簡單——為了要實現文字的環繞效果？
有人可能會問：啊？你剛才不是說了float的初衷就是實現文字環繞效果嗎？和破壞性有啥關係？
這時我會反問你：如果float不讓父元素坍塌，能實現文字環繞效果嗎？給你兩個圖看看你就知道了。
2.2. 包裹性
如上圖，普通的div如果沒有設定寬度，它會撐滿整個螢幕，在之前的盒子模式那一節也講到過。而如果給div增加float:left之後，它突然變得緊湊了，寬度發生了變化，把內容「王福朋」三個字包裹了——這就是包裹性。div設定了float之後，其寬度會自動調整為包裹住內容寬度，而不是撐滿整個父容器。
注意，此時div雖然體現了包裹性，但是它的display樣式是沒有變化的，還是block。
知道了包裹性之後，我們還是繼續思考：float為什麼要具有包裹性？其實答案還得從float的設計初衷來尋找，float是被設計用於實現文字環繞效果的。文字環繞比較好理解，但是如果想要讓文字環繞乙個div呢？此時div不被「包裹」起來，那麼如何去實現環繞效果？
2.3 清空格
float還有乙個大家可能不是很熟悉的特性——清空格。按照管理，咱還是先舉例子說明。
上圖中。第乙個例子，正常的img中間是會有空格的，因為多個
標籤會有換行，而瀏覽器識別換行為空格，這也是很正常的。第二個例子中，img增加了float:left的樣式，這就使得img之間沒有了空格，四個img緊緊挨著。
如果大家之前沒注意，現在想想之前寫過的程式，是不是有這個特性。為什麼float適合用於網頁排版（俗稱「砌磚頭」）？就是因為float排版出來的網頁嚴絲合縫，中間連個蒼蠅都飛不進去。
「清空格」這一特性的根本原因是由於float會導致節點脫離文件流結構。它都不屬於文件流結構了，那麼它身邊的什麼換行、空格就都和它沒關係的，它就盡量的往一邊去靠攏，能靠多近就靠多近，這就是清空格的本質。
為父元素新增overflow:hidden 這樣父元素就有高度了 ，父元素的高度便不會被破壞；
浮動父元素
這兩個方法比較簡單，在這裡也就不再演示了，大家有興趣的可以自己去試試。
第三種方法也不是很常用，但是大家要知道clear:both這個東西。通過在所有浮動元素下方新增乙個clear:both的元素，可以消除float的破壞性。
上圖中，我們定義乙個.clearfix類，然後對float元素的父元素應用這一樣式即可，非常簡單吧？注意，你可能會搜出不同版本的clearfix，有的**比上圖中的**多，你不用理會它，就按照我的貼圖的**寫就行。
究其原理，其實就是通過偽元素選擇器，在div後面增加了乙個clear:both的元素，跟第三種方法是乙個道理。
4.浮動的應用（使用float做網頁布局）
1.設定float屬性後，元素實際上會inline-block塊狀化
2.可以去掉排列間的空格
設定浮動後，元素就變為塊級元素了
但最好的應用還是應該讓他去實現文字的環繞效果，比如單側固定的流體布局，用：float+margin來實現。
大布局時可以用一下，小的布局時可以考慮用inline-block來砌磚頭（但是會有小間距，具體應用時看），盡量不要濫用。
css布局float浮動布局詳解
float屬性 頁面布局時主要採用 浮動 float 和定位 position 還有就是即不浮動也不定位的正常文件流結構三種 float屬性常用的語法是 float left right none 任何元素都可以被浮動，無論是塊元素div，ol，ul還是行內元素span strong都可以浮動，重要...
float詳解 聖杯布局
雖然現在有了flex彈性盒子模型，很多布局效果都可以通過flex盒子來實現，但由於flex盒子模型的相容性不容樂觀 ie至少要10才能支援flex，所以還是很有必要學習float流式布局的 正常的塊級元素的布局是這樣的 文字代表元素的float屬性 對於float布局要記住 1.如果浮動元素的上乙個...
DIV CSS布局 CSS浮動float屬性詳解
在傳統的 布局中，我們對 應該對齊方式對實現了對布局的應用，而應用web標準構建網頁以後，float浮動屬性是布局中非 常重要的屬性，我們常常通過對div元素應用float浮動來進行布局，不但對整個版式進行規劃，也可以對一些基本元素如導航等進行排列。我們來看看float屬性基本釋義 該屬性的值指出了...