重拾css(9)——float

1.引言

對於咱們全部的web前端開發人員，float是或者曾經一度是你最熟悉的陌生人——你離不開它，卻成天承受着它所帶給你的各類痛苦，你覺得它很簡單就那麼一點知識，但卻駕馭不了它各類奇怪的現象。
這就是咱們又愛又恨的——float。因此，系統的學一學float是很是很是有必要的。視頻學習可參考張鑫旭的《CSS深刻理解之float浮動》，講的很好很透徹。

2.從新認識float

2.1 誤解和「誤用」

這裏說的「誤用」並非真正的誤用，而是誤打誤撞使用以後，帶來了真正的效果。
絕大多數人用float都是爲了——橫向排版或者多列布局。這樣的使用是正確的，大部分人都這樣使用，bootstrap的柵格系統也是使用了float來實現的，而且在css3被普及以前，多列布局的最佳解決方案也是使用float——要否則你就用table，或display:table-cell。
可是，這樣使用確實是對float的一種誤解和「誤用」，由於float被設計出來的初衷是用於——文字環繞效果。即，一個圖片一段文字，圖片float:left以後，文字會環繞圖片。

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

若是你只知道float是用來排版，殊不知道float的許多特性，就會致使你在使用float時遇到許多問題。不信請看下文。

2.2 破壞性

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

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

「脫離文檔流」能夠理解爲子元素與父元素間的DOM結構被破壞，父子關係解除。

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

那麼，float爲何會被設計成具備破壞性，爲何會脫離文檔流？這一點很是重要！其實緣由很是簡單——爲了要實現文字的環繞效果！
若是float不讓父元素坍塌：

坍塌並脫離文檔流後：

2.3 包裹性

如上圖，普通的div若是沒有設置寬度，它會撐滿整個屏幕。而若是給div增長float:left以後，它忽然變得緊湊了，寬度發生了變化，把內容「Phone」包裹了——這就是包裹性。div設置了float以後，其寬度會自動調整爲包裹住內容寬度，而不是撐滿整個父容器。

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

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

2.4 清除空格

上圖中。第一個例子，正常的img中間是會有空格的，由於多個<img>標籤會有換行，而瀏覽器識別換行爲空格，這也是很正常的。第二個例子中，img增長了float:left的樣式，這就使得img之間沒有了空格，四個img牢牢挨着。
「清空格」這一特性的根本緣由是因爲float會致使節點脫離文檔流結構。它都不屬於文檔流結構了，那麼它身邊的什麼換行、空格就都和它不要緊的，它就儘可能的往一邊去靠攏，能靠多近就靠多近，這就是清空格的本質。

3.清除float（清除浮動）

float具備「破壞性」，它會致使父元素「坍塌」，這不咱們所指望的。如何去避免float帶來的這種影響呢（也就是咱們常說的「清除浮動」） ？方法有不少種，我在這裏介紹4中供你們參考，你們可根據實際狀況來選擇。
兩種簡單但不經常使用的方法：

1.爲父元素添加overflow:hidden;

2.浮動父元素

第三種方法clear:borth，不是很經常使用，可是你們要知道。經過在全部浮動元素下方添加一個clear:both的元素，能夠消除float的破壞性。

注意：也能夠添加在父div閉合元素下邊，這樣便是第四種方法的實現原理。
第四種方法是你們最須要掌握的，也是Bootstrap正在用的——clearfix

上圖中，咱們定義一個.clearfix(只是個類名，能夠隨意定義)類，而後對float元素的父元素應用這同樣式便可。究其原理，其實就是經過僞元素選擇器，在div後面增長了一個clear:both的元素，跟第三種方法是一個道理。

清除浮動四種方法可歸納爲：

4.合理使用float佈局網頁

估計大多數人誤解了float的本來設計初衷，可是這裏的「誤用」是要加引號的，由於這是一種無意插柳的應用。即，用float作網頁佈局是很合情合理的，鼓勵同志們繼續使用。
下面我列舉兩個經常使用的網頁佈局案例，僅供你們參考，不喜勿噴，善意留言！

第一，三列布局

博客園的主頁就是經典的三列布局，很明顯的左、中、右。

對於這種佈局，方案是：

注：float的包裹性，使得元素寬度不可設置，可是可經過內部的元素寬度來撐開float元素。

第二，兩列布局

以博客園一篇文章的連接爲例，它分爲左、右結構

對於這種佈局的格式，方案是：

w.imooc.com/learn/121