對於我們所有的web前端開發人員，float是或者曾經一度是你最熟悉的陌生人——你離不開它，卻整天承受著它所帶給你的各種痛苦，你以為它很簡單就那麼一點知識，但卻駕馭不了它各種奇怪的現象。
這就是我們又愛又恨的——float。所以，系統的學一學float是非常非常重要的。除了看書和看部落格文章之外，我推薦大家去看乙個奇葩（聲音很有磁性，你懂得）錄製的教程《css深入理解之float浮動》，講的很好很透徹。
既然提到「誤用」，各位看官就此想想，自己平日是怎麼使用float的？另外，既然「誤用」加了引號，就說明這樣的使用並不是真正的誤用，而是誤打誤撞使用之後，帶來了真正的效果。
這樣一問大家，我想絕大多數用float都是為了——橫向排版、或者多列布局。這樣的使用是正確的，大部分人都這樣使用，bootstrap的柵格系統也是使用了float來實現的，並且在css3被普及之前，多列布局的最佳解決方案也是使用float——要不然你就用table。
但是，這樣使用確實是對float的一種誤解和「誤用」，因為float被設計出來的初衷是用於——文字環繞效果。即，乙個一段文字，float:left之後，文字會環繞。
但是，當時的多列布局和橫向排版主要是依靠table實現，後來人們見見的發現，使用table將導致**量大、混亂、不利於seo，然後發現float+div是乙個很不錯的排版解決方案，於是乎——過去幾年「css+div」頁面排版一直是乙個熱門話題，也是各種高大上的面試題必考的一項。
初學float的同學，你如果沒有從最基礎的知識入手，而是從網路的零散之後或者同事同學的零散**學起的話，你可能只知道float是用來排版的，但是你卻不知道float的許多個特性，這就導致了你在使用float時的許多問題。不信請看下文。
首先大家來看兩個demo，如下圖。第乙個demo是乙個簡單不過的例子，顯示效果也很正常。第二個demo，唯一的區別就在於
不過，這就是float的「破壞性」——float破壞了父標籤的原本結構，使得父標籤出現了坍塌現象。導致這一現象的最根本原因在於：被設定了float的元素會脫離文件流。
初次接觸「脫離文件流」的朋友可以這樣理解：div是父親，img是它的兒子，原本好好的父子關係，原本爺倆可以體面的展示乙個包含關係的效果。直到有一天，img被設定了float。老天爺（瀏覽器）規定，任何float元素都不允許再呆在自己的家族中，於是img被逐出家門，斷絕和div父子關係。於是乎，div沒有了img兒子，也就不能再展示這種父子的包含關係，於是兩者就各過各的，互不相干。——這樣一說，容易理解了吧？
但是，永遠都不要忘記float被設計的初衷——實現文字環繞效果。當div中有文字時，文字還是會環繞在img周圍的。如下圖：
為什麼會被設計成具有破壞性，為什麼會脫離文件流？這一點非常重要！其實原因非常簡單——為了要實現文字的環繞效果？
有人可能會問：啊？你剛才不是說了float的初衷就是實現文字環繞效果嗎？和破壞性有啥關係？
如上圖，普通的div如果沒有設定寬度，它會撐滿整個螢幕，在之前的盒子模式那一節也講到過。而如果給div增加float:left之後，它突然變得緊湊了，寬度發生了變化，把內容「王福朋」三個字包裹了——這就是包裹性。div設定了float之後，其寬度會自動調整為包裹住內容寬度，而不是撐滿整個父容器。
注意，此時div雖然體現了包裹性，但是它的display樣式是沒有變化的，還是block。
知道了包裹性之後，我們還是繼續思考：float為什麼要具有包裹性？其實答案還得從float的設計初衷來尋找，float是被設計用於實現文字環繞效果的。文字環繞比較好理解，但是如果想要讓文字環繞乙個div呢？此時div不被「包裹」起來，那麼如何去實現環繞效果？
道理很簡單，你也可能是那種一點即通的聰明人，但是關鍵在於思考。
float還有乙個大家可能不是很熟悉的特性——清空格。按照管理，咱還是先舉例子說明。
上圖中。第乙個例子，正常的img中間是會有空格的，因為多個
如果大家之前沒注意，現在想想之前寫過的程式，是不是有這個特性。為什麼float適合用於網頁排版（俗稱「砌磚頭」）？就是因為float排版出來的網頁嚴絲合縫，中間連個蒼蠅都飛不進去。
「清空格」這一特性的根本原因是由於float會導致節點脫離文件流結構。它都不屬於文件流結構了，那麼它身邊的什麼換行、空格就都和它沒關係的，它就盡量的往一邊去靠攏，能靠多近就靠多近，這就是清空格的本質。
（float內容比較多，咱們分上、下兩篇來介紹，這是上篇。下篇將馬上發出，敬請期待）
本系列的目錄頁面：
也歡迎關注我的開源專案——wangeditor，簡潔易用的web富文字編輯器
css知多少（8） float上篇
對於我們所有的web前端開發人員，float是或者曾經一度是你最熟悉的陌生人 你離不開它，卻整天承受著它所帶給你的各種痛苦，你以為它很簡單就那麼一點知識，但卻駕馭不了它各種奇怪的現象。這就是我們又愛又恨的 float。所以，系統的學一學float是非常非常重要的。除了看書和看部落格文章之外，我推薦大...
css知多少（9） float下篇
先介紹兩個比較簡單，但是不常用的解決方法 為父元素新增overflow hidden 浮動父元素 這兩個方法比較簡單，在這裡也就不再演示了，大家有興趣的可以自己去試試。第三種方法也不是很常用，但是大家要知道clear both這個東西。通過在所有浮動元素下方新增乙個clear both的元素，可以消...
css知多少（5） 選擇器
從本節開始，就進入本系列的第二個部分 css和html的結合 說白了就是選擇器。css中定義了樣式，如何將這些樣式設定到相應的html節點上？就不得不通過選擇器。讓瀏覽器知道css選擇了哪乙個dom節點，瀏覽器就會乖乖的把相應的樣式渲染成檢視。至於css能把頁面渲染成什麼樣子，這是本系列的第三部分。...