浮動float出現(xiàn)的本意是用來實現(xiàn)文字像流水一樣環(huán)繞浮動元素的效果晒奕。因為除了這個效果以外闻书，float屬性的其他應(yīng)用都可以用其他css屬性來實現(xiàn)名斟。
由于CSS是一門相當靈活的語言。某個CSS屬性被用于的場景魄眉，可能會完全違背當初創(chuàng)造該CSS屬性的本意砰盐。就如今天我們要講的float，因為可以很簡單的實現(xiàn)多列布局而常被當作布局屬性使用杆融。
浮動的特性：
包裹性：浮動屬性可以使block元素產(chǎn)生類似inline-block的狀態(tài)使其產(chǎn)生包裹內(nèi)容的效果楞卡。
破壞性（欺騙性）：對行內(nèi)盒inline-boxs設(shè)置浮動會破壞其所在行盒l(wèi)ine-box的結(jié)構(gòu)。
這個很好理解脾歇，因為浮動元素脫離了文檔流蒋腮，其父元素失去了內(nèi)容，所以失去了高度藕各。但浮動對其父元素line-box結(jié)構(gòu)的影響不止于此池摧。
可以理解為當元素浮動后，就如物體浮出湖面一樣激况，不占距湖底空間作彤，但是在湖底有個投影。而周圍的內(nèi)聯(lián)元素就像膽小的魚兒一樣被影子欺騙乌逐，認為它就在哪里竭讳，所以不敢進去，只是圍在一邊浙踢。
浮動元素在脫離文檔流的同時還會影響頁面中的行內(nèi)元素
浮動在文檔流中的影響：
假如某個div元素A是浮動的绢慢，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素洛波，那么A元素會被擠到下一行)胰舆；如果A元素上一個元素是標準流中的元素，那么A的相對垂直位置不會改變蹬挤，也就是說A的頂部總是和上一個元素的底部對齊缚窿。
如果把上面這段定義中的浮動元素換為inline-block元素，他同樣成立焰扳，所以說在某些方面float元素和inline-block元素是相同的倦零。
同為在一行排列，浮動元素就像時打了強化劑的inline-block蓝翰，使他能設(shè)置排列的方向光绕，但同時會有副作用，如上面講到的破壞性畜份。
我們一方面要使用他的布局能力，另一方面又不希望他副作用破壞布局欣尼，所以在使用float的時候爆雹，我們還會想辦法清除浮動停蕉。
有哪些清除浮動的方法？
1钙态、使用clear?
clear : none | left | right | both
2慧起、增加一個清除浮動的子元素
3、用:after偽元素
4册倒、父元素設(shè)置 overflow:hidden
5蚓挤、父元素也設(shè)成float
6、父元素設(shè)置display:table驻子。
第一種方法只適合相鄰浮動元素清除浮動灿意，后面三種是觸發(fā)了BFC，推薦使用第三種方法崇呵。
什么是BFC
BFC就是“塊級格式化上下文”的意思缤剧，創(chuàng)建了 BFC的元素就是一個獨立的盒子，不過只有Block-level box可以參與創(chuàng)建BFC域慷， 它規(guī)定了內(nèi)部的Block-level Box如何布局荒辕，并且與這個獨立盒子里的布局不受外部影響，當然它也不會影響到外面的元素犹褒。
何為格式化上下文抵窒，個人理解就是將BFC容器進行格式化，使其不受上下元素的影響叠骑。
格式化具體指的是什么格式李皇，可以參考html基本流，因為html本身就是一個BFC容器座云，大致特性如下：
內(nèi)部的Box會在垂直方向疙赠，從頂部開始一個接一個地放置。
Box垂直方向的距離由margin決定朦拖。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生疊加
每個元素的margin box的左邊圃阳， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)璧帝。即使存在浮動也是如此捍岳。
BFC的區(qū)域不會與float box疊加。
BFC就是頁面上的一個隔離的獨立容器睬隶，容器里面的子元素不會影響到外面的元素锣夹，反之亦然。 計算BFC的高度時苏潜，浮動元素也參與計算银萍。
參考文獻：
