最近研究清除浮動和布局相關的問題，感覺概念很多很雜，而且這些東西經(jīng)常用到，今天才有時間來好好整理一下不懂的和懂得，來把他們一起結合起來看。
浮動元素與absolute
了解下float的起源和現(xiàn)狀
浮動早期是用來文字環(huán)繞的，文字環(huán)繞圖片。
至于為什么浮動能做自適應，環(huán)繞圖片?
這里我們可以看看張鑫旭博客的例子，當圖片和文字排列在一起的時候，他們自我形成了很多l(xiāng)ine box，而利用浮動就能破壞這些line box，具體參見css兩種模型，其實歸根結底文字環(huán)繞的原理也是破壞這些line box。所以當我們設置float left的時候會碰到一個常見的問題，那就是高度塌陷的問題，父元素并沒有了高度，因為浮動的元素并沒有高度，所以父元素沒高度。這時候清除浮動就派上用場了。可以說我們是一邊享受著浮動帶給我們的便利，一邊還要承擔它的后果，只是因為我們使用的場景有問題，那么問題來了，有沒有一勞永逸的辦法呢。
css兩種模型
在目前的css世界中，所有的高度都是由兩個css模型產(chǎn)生的，一個是box盒狀模型，對應css為“height+padding+margin”,另一個是line box模型，對象樣式為line-height。前者的height屬性分為明顯的height值和隱藏的height值，所謂隱藏的height值是指圖片的高度，一旦載入一張圖片，其內(nèi)在的height值就會起作用，即使看不到"height“這個詞。而后者針對于文字等這類inline boxes的元素（圖片也屬于inline boxes,但其height比line-height作用更兇猛，故其inline boxes的高度就等于其自身的高度，對line-height無反應），inline boxes的高度直接受line-height控制（改變line-height文字拉開或重疊就是這個原因），而真正的高度表現(xiàn)則是由每行眾多的inline boxes組成的line boxes(等于內(nèi)部最高的inline boxes),而這些line boxes的高度垂直堆疊形成了containing box的高度，也就是我們見到的div或p標簽之類的高度。所以對于line box模型的元素而言，沒有inline boxes,就沒有高度了，而浮動恰恰是將元素的inline boxes破壞了，于是這些元素就沒有高度了。
height與line height
這里額外提到一個知識點，關于line box的heigt與line height，可以看到當把文字的line height設置為0，沒有了height，而擁有l(wèi)ine height，文字size設置為0，height確實存在的，證明決定高度的在于這個line height，一般來說我們設置heght與line height一樣即可是垂直居中（實際并不需要heigt），就是這個道理。關于這兩個屬性還需提到的就是line height不會使用haslayout，而height會使用haslayout,line height能讓文字自適應，而height 是block，占滿一行。
為什么文字環(huán)繞圖片不用清除浮動，而布局需要？
一句話，因為元素環(huán)繞（例如文字），其自身是含有inline boxes高度的，這是inline水平的元素形成高度的基礎，所以，雖然浮動元素沒有高度，但是其周圍環(huán)繞的元素是有高度的，只要環(huán)繞元素比浮動元素高度高，父標簽無高度的問題自然也就沒有了，但是純粹一堆浮動元素會有高度嗎？沒有。
display absolute與float left的比較
兩者區(qū)別在與包裹性，即一個脫離了文檔流，而另一個依然在文檔流中，還是回到文字包裹圖片，他還是占據(jù)了位置，但是absoulute卻像一個世外高人， 與世無爭了。
能與float實現(xiàn)相同效果的屬性介紹
display inline-block
float left可以看到，雖然功能強大，但是實際上它的誕生并不是為了布局的，這里我們可以使用另一種方式display inline-block的方式來進行布局，缺點在于要清除間隙。
在這里提一下BFC，我剛入門也被這幾個搞混了，overflow hidden，display inline-block，float等等都能實現(xiàn)浮動，那到底有何區(qū)別呢。
BFC元素簡介和基本特性
元素內(nèi)部無論怎么變化不影響外部。BFC元素margin不相互疊加和清除浮動都是基于此點。
觸發(fā)BFC條件
float的值不為none。
overflow的值為auto,scroll或hidden。
display的值為table-cell, table-caption, inline-block中的任何一個。
position的值不為relative和static。
bfc按我的理解是獨立出來一個區(qū)域，這個區(qū)域只有滿足bfc觸發(fā)條件才會進入，是與普通文檔流互不沖突的一個區(qū)域。
https://www.zhihu.com/question/21985587
http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
https://zhuanlan.zhihu.com/p/25321647
https://www.w3.org/TR/CSS2/visuren.html#positioning-scheme
注：按順序觀看最好
