最近研究清除浮動(dòng)和布局相關(guān)的問題，感覺概念很多很雜松忍，而且這些東西經(jīng)常用到潭枣，今天才有時(shí)間來好好整理一下不懂的和懂得，來把他們一起結(jié)合起來看逃魄。
浮動(dòng)元素與absolute
了解下float的起源和現(xiàn)狀
浮動(dòng)早期是用來文字環(huán)繞的荤西，文字環(huán)繞圖片。
至于為什么浮動(dòng)能做自適應(yīng)，環(huán)繞圖片?
這里我們可以看看張鑫旭博客的例子邪锌，當(dāng)圖片和文字排列在一起的時(shí)候勉躺，他們自我形成了很多l(xiāng)ine box，而利用浮動(dòng)就能破壞這些line box觅丰，具體參見css兩種模型饵溅，其實(shí)歸根結(jié)底文字環(huán)繞的原理也是破壞這些line box。所以當(dāng)我們設(shè)置float left的時(shí)候會(huì)碰到一個(gè)常見的問題妇萄，那就是高度塌陷的問題蜕企，父元素并沒有了高度，因?yàn)楦?dòng)的元素并沒有高度冠句，所以父元素沒高度轻掩。這時(shí)候清除浮動(dòng)就派上用場了∨车祝可以說我們是一邊享受著浮動(dòng)帶給我們的便利唇牧，一邊還要承擔(dān)它的后果，只是因?yàn)槲覀兪褂玫膱鼍坝袉栴}聚唐，那么問題來了丐重，有沒有一勞永逸的辦法呢。
css兩種模型
在目前的css世界中杆查，所有的高度都是由兩個(gè)css模型產(chǎn)生的扮惦，一個(gè)是box盒狀模型，對應(yīng)css為“height+padding+margin”,另一個(gè)是line box模型亲桦，對象樣式為line-height崖蜜。前者的height屬性分為明顯的height值和隱藏的height值，所謂隱藏的height值是指圖片的高度客峭，一旦載入一張圖片纳猪，其內(nèi)在的height值就會(huì)起作用，即使看不到"height“這個(gè)詞桃笙。而后者針對于文字等這類inline boxes的元素（圖片也屬于inline boxes,但其height比line-height作用更兇猛氏堤，故其inline boxes的高度就等于其自身的高度，對line-height無反應(yīng)）搏明，inline boxes的高度直接受line-height控制（改變line-height文字拉開或重疊就是這個(gè)原因）鼠锈，而真正的高度表現(xiàn)則是由每行眾多的inline boxes組成的line boxes(等于內(nèi)部最高的inline boxes),而這些line boxes的高度垂直堆疊形成了containing box的高度，也就是我們見到的div或p標(biāo)簽之類的高度星著。所以對于line box模型的元素而言购笆，沒有inline boxes,就沒有高度了，而浮動(dòng)恰恰是將元素的inline boxes破壞了虚循，于是這些元素就沒有高度了同欠。
height與line height
這里額外提到一個(gè)知識(shí)點(diǎn)样傍，關(guān)于line box的heigt與line height，可以看到當(dāng)把文字的line height設(shè)置為0铺遂，沒有了height衫哥，而擁有l(wèi)ine height，文字size設(shè)置為0襟锐，height確實(shí)存在的撤逢，證明決定高度的在于這個(gè)line height，一般來說我們設(shè)置heght與line height一樣即可是垂直居中（實(shí)際并不需要heigt）粮坞，就是這個(gè)道理蚊荣。關(guān)于這兩個(gè)屬性還需提到的就是line height不會(huì)使用haslayout，而height會(huì)使用haslayout,line height能讓文字自適應(yīng)莫杈，而height 是block互例，占滿一行。
為什么文字環(huán)繞圖片不用清除浮動(dòng)筝闹，而布局需要敲霍？
一句話，因?yàn)樵丨h(huán)繞（例如文字）丁存，其自身是含有inline boxes高度的，這是inline水平的元素形成高度的基礎(chǔ)柴我，所以解寝，雖然浮動(dòng)元素沒有高度，但是其周圍環(huán)繞的元素是有高度的艘儒，只要環(huán)繞元素比浮動(dòng)元素高度高聋伦，父標(biāo)簽無高度的問題自然也就沒有了，但是純粹一堆浮動(dòng)元素會(huì)有高度嗎界睁？沒有觉增。
display absolute與float left的比較
兩者區(qū)別在與包裹性，即一個(gè)脫離了文檔流翻斟，而另一個(gè)依然在文檔流中逾礁，還是回到文字包裹圖片，他還是占據(jù)了位置访惜，但是absoulute卻像一個(gè)世外高人嘹履， 與世無爭了。
能與float實(shí)現(xiàn)相同效果的屬性介紹
display inline-block
float left可以看到债热，雖然功能強(qiáng)大砾嫉，但是實(shí)際上它的誕生并不是為了布局的，這里我們可以使用另一種方式display inline-block的方式來進(jìn)行布局窒篱，缺點(diǎn)在于要清除間隙焕刮。
在這里提一下BFC舶沿，我剛?cè)腴T也被這幾個(gè)搞混了，overflow hidden配并，display inline-block括荡，float等等都能實(shí)現(xiàn)浮動(dòng)，那到底有何區(qū)別呢荐绝。
BFC元素簡介和基本特性
元素內(nèi)部無論怎么變化不影響外部一汽。BFC元素margin不相互疊加和清除浮動(dòng)都是基于此點(diǎn)。
觸發(fā)BFC條件
float的值不為none低滩。
overflow的值為auto,scroll或hidden召夹。
display的值為table-cell, table-caption, inline-block中的任何一個(gè)。
position的值不為relative和static恕沫。
bfc按我的理解是獨(dú)立出來一個(gè)區(qū)域监憎，這個(gè)區(qū)域只有滿足bfc觸發(fā)條件才會(huì)進(jìn)入，是與普通文檔流互不沖突的一個(gè)區(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
注：按順序觀看最好
