在平常的css樣式設(shè)計(jì)中欺缘，經(jīng)常會(huì)使用到float屬性栋豫，一看到這一屬性，我就會(huì)下意識(shí)地反應(yīng)谚殊，這是浮動(dòng)丧鸯，但是浮動(dòng)到底是什么，浮動(dòng)的影響是什么嫩絮，如何消除浮動(dòng)丛肢，我一直處于知其然而不知其所以然的狀態(tài)，所以時(shí)隔一個(gè)星期剿干，寫下了這篇文章蜂怎。
浮動(dòng)的原理是使元素脫離普通流(稱呼為文檔流也可)，使其可以左右浮動(dòng)置尔，直至它的外邊緣遇到包含框或者另一個(gè)浮動(dòng)框的邊緣杠步。
對(duì)內(nèi)聯(lián)元素浮動(dòng)我們會(huì)驚訝地發(fā)現(xiàn)，我們居然能對(duì)其設(shè)置寬高榜轿，原因是當(dāng)元素浮動(dòng)時(shí)幽歼，會(huì)觸發(fā)BFC（Block Formatting Context）塊級(jí)格式化上下文，這時(shí)創(chuàng)建的BFC元素就是一個(gè)獨(dú)立的盒子谬盐。也就是說(shuō)试躏，元素設(shè)置浮動(dòng)后，元素就會(huì)變成BFC元素设褐，這時(shí)候它就類似于inline-block(內(nèi)聯(lián)塊級(jí)元素)的效果。
想詳細(xì)了解BFC的同學(xué)請(qǐng)轉(zhuǎn): http://www.cnblogs.com/tim100/p/6056533.html#top泣刹。
浮動(dòng)有什么好處和影響呢助析？
影響：
1、眾所周知椅您，浮動(dòng)后元素會(huì)脫離普通文檔流外冀，如果父元素的高度是由該浮動(dòng)元素填充的話，就會(huì)出現(xiàn)高度崩塌的問(wèn)題掀泳，這時(shí)候浮動(dòng)緊鄰的塊級(jí)元素會(huì)填充浮動(dòng)元素遺留下來(lái)的空間雪隧，發(fā)生重疊，浮動(dòng)層在上面员舵。
2脑沿、會(huì)對(duì)附近元素布局造成影響，可能導(dǎo)致布局混亂問(wèn)題马僻。
好處：
1庄拇、浮動(dòng)可以解決塊級(jí)元素獨(dú)占一行的問(wèn)題。因?yàn)楦?dòng)后，元素就變成了BFC元素措近，并且脫離了普通流(文檔流)溶弟，在設(shè)置多列布局的時(shí)候可以使用。
2瞭郑、浮動(dòng)后的元素可以設(shè)置寬度和高度等辜御。原理同上。
我們?cè)撊绾蜗馗?dòng)帶來(lái)的影響呢屈张？
清除浮動(dòng)可以分為以下兩種：
清除浮動(dòng)：使用clear元素清除外面浮動(dòng)擒权，解決外面浮動(dòng)對(duì)自己的影響。對(duì)應(yīng)CSS中的屬性是 clear：left | right | both | none袜茧；
閉合浮動(dòng)：當(dāng)前塊級(jí)中菜拓，其子元素使用了浮動(dòng)，會(huì)給當(dāng)前塊內(nèi)部和塊外部的布局帶來(lái)影響笛厦，所以使浮動(dòng)元素閉合纳鼎，從而減少浮動(dòng)帶來(lái)的影響。
閉合浮動(dòng)有以下3種方法：
一：通過(guò)在浮動(dòng)元素的末尾添加一個(gè)空元素裳凸，設(shè)置 clear：both屬性贱鄙；
缺點(diǎn)：成本太高，額外添加了一個(gè)元素姨谷，維護(hù)困難
二：通過(guò)設(shè)置父元素使其成為BFC元素來(lái)閉合浮動(dòng)逗宁。
觸發(fā)元素BFC:
浮動(dòng)元素: float除none以外的值。
絕對(duì)定位元素: position: absolute | fixed梦湘。
display為inline-block瞎颗、table-cells、flex捌议。
overflow除了visible以外的值哼拔。hidden | auto | scroll。
三（推薦）：使用偽元素：after,下面是代碼瓣颅，即相當(dāng)于方法一的給一個(gè)空元素設(shè)置clear: both屬性倦逐，卻不需要額外添加新元素。
.clearfloat{
zoom:1;
}
.clearfloat:after{
content: '';
display: table;
clear: both;
}
這時(shí)候又有新的疑問(wèn)宫补，為什么overflow: hidden能夠清除浮動(dòng)呢檬姥？
因?yàn)楫?dāng)元素設(shè)置了overflow: hidden了之后，元素就成為了一個(gè)BFC元素了粉怕，BFC元素間或者內(nèi)是不會(huì)發(fā)生重疊問(wèn)題的(因?yàn)锽FC元素計(jì)算時(shí)將浮動(dòng)元素的寬高計(jì)算在內(nèi))健民，此時(shí)就能夠清除掉元素浮動(dòng)帶來(lái)的影響了。
結(jié)語(yǔ)
通過(guò)上文贫贝，我們可以知道荞雏，浮動(dòng)和BFC息息相關(guān)，如果想要弄懂浮動(dòng)布局，BFC也必須了解凤优。
