CSS佈局(四) float詳解

1、float設計初衷

由於float被設計出來的初衷是用於——文字環繞效果。即，一個圖片一段文字，圖片float:left以後，文字會環繞圖片。

    <div style="width: 100px;height: 100px">
        <img src="image/1.jpg" style="width: 50px;height: 50px;float: left">阿斯利康你們啊勝利大街拉速度來喀什建檔立卡結算單
    </div>

2、float多個特性

2.1.    破壞性

　　首先你們來看兩個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.2.    包裹性

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

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

　　

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

　　

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

2.3 清空格

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

　　

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

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

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

3、清除浮動

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

1. 爲父元素添加overflow:hidden　　這樣父元素就有高度了 ，父元素的高度便不會被破壞；
2. 浮動父元素

　　這兩個方法比較簡單，在這裏也就再也不演示了，你們有興趣的能夠本身去試試。

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

　　

　　接下來的第四種方法是你們最須要掌握的，也是我推薦的，也是bootstrap正在用的——clearfix——不知道的同窗必定要去搜一下，要否則就太low了！

　　

　　上圖中，咱們定義一個.clearfix類，而後對float元素的父元素應用這同樣式便可，很是簡單吧？注意，你可能會搜出不一樣版本的clearfix，有的代碼比上圖中的代碼多，你不用理會它，就按照個人貼圖的代碼寫就行。

　　究其原理，其實就是經過僞元素選擇器，在div後面增長了一個clear:both的元素，跟第三種方法是一個道理。

4.浮動的應用（使用float作網頁佈局）

1.設置float屬性後，元素實際上會inline-block塊狀化

2.能夠去掉排列間的空格

 

設置浮動後，元素就變爲塊級元素了

但最好的應用仍是應該讓他去實現文字的環繞效果，好比單側固定的流體佈局，用：float+margin來實現。

大布局時能夠用一下，小的佈局時能夠考慮用inline-block來砌磚頭（可是會有小間距，具體應用時看），儘可能不要濫用。