浮動（float）,一個利于布局又影響布局的屬性释涛，先看下w3c上的解釋
A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the ‘clear’ property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.
【譯】浮動元素（浮動框）是在當前行向左或右移動入问。浮動最有趣的特性是內(nèi)容沿著邊流動（以及用“clear”屬性來阻止這樣做）。內(nèi)容（一般指行內(nèi)元素或者塊元素中的行框等）在左（右）浮動元素的右（左）邊按照順序依次從上到下排列(環(huán)繞在該浮動元素周圍)途茫。
浮動元素是float屬性值不是none的元素。
浮動在最早被發(fā)明出來只有文字環(huán)繞這一個功能悦析，結(jié)果用著用著就被用來布局了培廓。。误褪。
我學(xué)習(xí)浮動是通過一個個問題去學(xué)習(xí)的：
1.文字為什么會環(huán)繞圖片责鳍？
2.浮動跟絕對定位，inline-block的區(qū)別兽间？
3.浮動的作用历葛？
4.為什么清除浮動？
5.清除浮動的方法嘀略？
1.文字為什么會環(huán)繞圖片恤溶？
默認情況下，一張圖片跟文字同屬于行內(nèi)元素（inline-box）,組成一個塊級元素（line-box）帜羊，保持底端對其咒程，高寬由最高的行內(nèi)元素內(nèi)容決定,如果父級盒子有規(guī)定寬度，超過則會換行讼育，否則內(nèi)容一直保持一行帐姻，所以一張圖片只能和一行文字在一行
而浮動呢，自然就是破壞掉圖片的行內(nèi)盒子啦奶段！
浮動最重要的一點：浮動是作用在應(yīng)用浮動的元素本身卖宠，對鄰近的元素產(chǎn)生影響。拿上面這個例子來說忧饭，對圖片應(yīng)用float:left,圖片這個行內(nèi)盒子本身被破壞，轉(zhuǎn)換為帶有行內(nèi)元素部分屬性的塊級元素（即inline-block）筷畦，脫離之前的父級盒子（line-box）,之前圖片沒了高度词裤，對后面文字這個產(chǎn)生影響，而文字還是一個行內(nèi)元素鳖宾，文字找不到東西來對齊吼砂，所以只能往上走；另外行內(nèi)元素(圖片)沒了高度會導(dǎo)致行高（line-height）失效鼎文，而line-height是行框盒子（line-box)產(chǎn)生高度的基礎(chǔ)渔肩，所以父級元素（line-box)也就沒了高度，所謂塌陷拇惋。
說了一堆周偎，好像也沒說到關(guān)鍵抹剩。。蓉坎。好了澳眷，重點來了。
浮動元素脫離了父級塊級盒子蛉艾，父元素塌陷了钳踊，浮動元素有了跟塊級盒子一樣的高寬屬性（圖片這種實體本身就有），被包裹起來勿侯，依然和其它塊級盒子里面的行內(nèi)盒子同級拓瞪，后面的塊級盒子（line-box）和行內(nèi)盒子（inline-box）往前移動,但與之相同類型行內(nèi)元素會被帶有寬度的浮動元素的空架子所阻擋。
什么意思呢助琐？拿下面這個demo來說（代碼點擊此處）
黃色和綠色內(nèi)容的為圖片浮動之前同類型的行內(nèi)元素,整個粉紅色的為一個塊級元素祭埂，包含著里面的綠色的行內(nèi)元素。 (為了讓例子更形象弓柱，部分盒子設(shè)置了margin-left)?
浮動以后沟堡，圖片一定程度上脫離之前文本流，黃色的文字不用再與之底端基線對齊矢空，往上從最外層div左上邊開始排列航罗，但因為與圖片box類型一致(應(yīng)該理解為都有內(nèi)聯(lián)盒子不獨占一行，后邊可以有兄弟元素的特性)屁药，被迫右移粥血，讓出空間，同理綠色的行內(nèi)元素也要讓出酿箭，但它的父元素外邊的粉色塊級元素不需要讓位复亏，直接占領(lǐng)圖片的位置。最下面就沒啥影響了缭嫡，直接從左往右排缔御。這樣就形成了文字環(huán)繞效果。
總結(jié)：浮動就是使不管是內(nèi)聯(lián)元素還是塊級元素通通轉(zhuǎn)換為一個類似于“inline-block”的元素,專門用來擋住內(nèi)聯(lián)（行內(nèi)）元素的妇蛀，塊級元素則會無視它耕突。
2.浮動跟絕對定位，inline-block的區(qū)別评架？
浮動：以某種特殊方式將元素從之前的文檔流（父級盒子）中刪除眷茁，無視周圍的換行，空格纵诞，一個接一個緊密排列上祈，但保留框架來阻擋內(nèi)聯(lián)元素，塊級元素會無視它。
絕對定位（position：absolute）：完全脫離文本流登刺，所有元素都會無視它籽腕。
display：inline-block：不脫離文本流，位置依然占據(jù)塘砸，可以理解為帶寬度高度的行內(nèi)盒子节仿，后面的內(nèi)聯(lián)元素會與其在同一行保持基線對齊，塊級元素則會另起一行掉蔬。同一行的元素之間默認有空白廊宪。
3.浮動的作用？
（1）實現(xiàn)文字環(huán)繞效果 (設(shè)計初衷)女轿。
（2）讓網(wǎng)頁塊狀布局箭启，否則div默認上下排列布局。
（3）包裹行內(nèi)元素蛉迹，div設(shè)置了float之后傅寡，其寬度會自動調(diào)整為包裹行內(nèi)元素，而不是撐滿整個父容器（占一行）北救。
4.為什么清除浮動荐操？
（1）父級元素塌陷，沒有高度和背景珍策。
（2）影響后面元素的布局
5.清除浮動的方法托启？
清除浮動是清除浮動影響，不是消除浮動本身Ｈ林妗Ｍ退省！
（1）最粗暴的方法：浮動元素脫離父容器蹭劈，導(dǎo)致父容器塌陷疗绣，這時候直接計算出子元素的高度給父容器定義就行。
（2）添加一個div?(.clearfix{clear：both})?跟在同一父容器下的浮動元素后面或者兩個父容器之間铺韧，強行新占一行多矮，讓后面的元素只能新開一行，相當于在兩個元素之間隔了一個水平方向的墻哈打。
（3）添加一個偽類（.clearfix:after{content:"";display:block;clear:both;height:0; visibility:hidden;}）塔逃，實現(xiàn)跟2同樣的效果，但是可以省下一個div標簽（總是有好處的吧前酿，至少好看，至于什么處理速度啥的現(xiàn)在也不懂鹏溯。罢维。。）-------這個方法目前來看最合適
display;block:使元素以塊級顯示，占滿一行肺孵。
height：0：避免對原盒子的高度產(chǎn)生影響匀借。
visibility:hidden:避免遮擋之前的內(nèi)容。
content：“”：避免影響原布局平窘。
（4）父級觸發(fā)BFC
