css知多少（8）——float上篇

1. 引言

　　對於咱們全部的web前端開發人員，float是或者曾經一度是你最熟悉的陌生人——你離不開它，卻成天承受着它所帶給你的各類痛苦，你覺得它很簡單就那麼一點知識，但卻駕馭不了它各類奇怪的現象。

　　這就是咱們又愛又恨的——float。因此，系統的學一學float是很是很是重要的。除了看書和看博客文章以外，我推薦你們去看一個奇葩（聲音頗有磁性，你懂得）錄製的教程《CSS深刻理解之float浮動》，講的很好很透徹。

2. 從新認識float

2.1.    誤解和「誤用」

　　既然提到「誤用」，各位看官就此想一想，本身平日是怎麼使用float的？另外，既然「誤用」加了引號，就說明這樣的使用並非真正的誤用，而是誤打誤撞使用以後，帶來了真正的效果。

　　這樣一問你們，我想絕大多數用float都是爲了——橫向排版、或者多列布局。這樣的使用是正確的，大部分人都這樣使用，bootstrap的柵格系統也是使用了float來實現的，而且在css3被普及以前，多列布局的最佳解決方案也是使用float——要否則你就用table。

　　可是，這樣使用確實是對float的一種誤解和「誤用」，由於float被設計出來的初衷是用於——文字環繞效果。即，一個圖片一段文字，圖片float:left以後，文字會環繞圖片。

　　

　　可是，當時的多列布局和橫向排版主要是依靠table實現，後來人們見見的發現，使用table將致使代碼量大、混亂、不利於SEO，而後發現float+div是一個很不錯的排版解決方案，因而乎——過去幾年「css+div」頁面排版一直是一個熱門話題，也是各類高大上的面試題必考的一項。

　　初學float的同窗，你若是沒有從最基礎的知識入手，而是從網絡的零散以後或者同事同窗的零散代碼學起的話，你可能只知道float是用來排版的，可是你殊不知道float的許多個特性，這就致使了你在使用float時的許多問題。不信請看下文。

2.2.    破壞性

　　首先你們來看兩個demo，以下圖。第一個demo是一個簡單不過的例子，顯示效果也很正常。第二個demo，惟一的區別就在於<img>加了float:left，上層的<div>卻出現了「坍塌」現象。

　　

　　不過，這就是float的「破壞性」——float破壞了父標籤的本來結構，使得父標籤出現了坍塌現象。致使這一現象的最根本緣由在於：被設置了float的元素會脫離文檔流。

　　初次接觸「脫離文檔流」的朋友能夠這樣理解：div是父親，img是它的兒子，本來好好的父子關係，本來爺倆能夠體面的展現一個包含關係的效果。直到有一天，img被設置了float。老天爺（瀏覽器）規定，任何float元素都不容許再呆在本身的家族中，因而img被逐出家門，斷絕和div父子關係。因而乎，div沒有了img兒子，也就不能再展現這種父子的包含關係，因而二者就各過各的，互不相干。——這樣一說，容易理解了吧？

　　可是，永遠都不要忘記float被設計的初衷——實現文字環繞效果。當div中有文字時，文字仍是會環繞在img周圍的。以下圖：

　　

      

　　好了，你們如今已經知道了float具備破壞性，可能也有不少朋友以前就知道這一特性，可是你有沒有思考一下：float爲何會被設計成具備破壞性，爲何會脫離文檔流？這一點很是重要！其實緣由很是簡單——爲了要實現文字的環繞效果？

　　有人可能會問：啊？你剛纔不是說了float的初衷就是實現文字環繞效果嗎？和破壞性有啥關係？

　　這時我會反問你：若是float不讓父元素坍塌，能實現文字環繞效果嗎？給你兩個圖看看你就知道了。看不明白的能夠給我留言討論。

　　

2.3.    包裹性

　　「包裹性」也是float的一個很是重要的特性，你們用float時必定要熟知這一特性。我們仍是先從一個小例子看起：

　　

　　如上圖，普通的div若是沒有設置寬度，它會撐滿整個屏幕，在以前的盒子模式那一節也講到過。而若是給div增長float:left以後，它忽然變得緊湊了，寬度發生了變化，把內容「王福朋」三個字包裹了——這就是包裹性。div設置了float以後，其寬度會自動調整爲包裹住內容寬度，而不是撐滿整個父容器。

　　注意，此時div雖然體現了包裹性，可是它的display樣式是沒有變化的，仍是block。

　　

　　說道這裏我們回顧一下，在以前的博客中，也提到了「包裹性」，是哪些樣式？你能夠在此思考一下，我會在博客的評論中給出答案 。

　　

　　知道了包裹性以後，咱們仍是繼續思考：float爲何要具備包裹性？其實答案還得從float的設計初衷來尋找，float是被設計用於實現文字環繞效果的。文字環繞圖片比較好理解，可是若是想要讓文字環繞一個div呢？此時div不被「包裹」起來，那麼如何去實現環繞效果？

　　道理很簡單，你也多是那種一點即通的聰明人，可是關鍵在於思考。

2.4.    清空格

　　float還有一個你們可能不是很熟悉的特性——清空格。按照管理，咱仍是先舉例子說明。

　　

　　上圖中。第一個例子，正常的img中間是會有空格的，由於多個<img>標籤會有換行，而瀏覽器識別換行爲空格，這也是很正常的。第二個例子中，img增長了float:left的樣式，這就使得img之間沒有了空格，四個img牢牢挨着。

　　若是你們以前沒注意，如今想一想以前寫過的程序，是否是有這個特性。爲何float適合用於網頁排版（俗稱「砌磚頭」）？就是由於float排版出來的網頁嚴絲合縫，中間連個蒼蠅都飛不進去。

　　「清空格」這一特性的根本緣由是因爲float會致使節點脫離文檔流結構。它都不屬於文檔流結構了，那麼它身邊的什麼換行、空格就都和它不要緊的，它就儘可能的往一邊去靠攏，能靠多近就靠多近，這就是清空格的本質。

　　

　　（float內容比較多，我們分上、下兩篇來介紹，這是上篇。下篇將立刻發出，敬請期待）

---------------------------------------------------------------

本系列的目錄頁面：http://www.cnblogs.com/wangfupeng1988/p/4325007.html

-------------------------------------------------------------------------------------------------------------

學習做者教程：《前端JS高級面試》《前端JS基礎面試題》《React.js模擬大衆點評webapp》《zepto設計與源碼分析》《json2.js源碼解讀》

也歡迎關注個人開源項目——wangEditor，簡潔易用的web富文本編輯器

-------------------------------------------------------------------------------------------------------------