float : left | right | none
????? 設計之初的作用是做文字環(huán)繞
????? p標簽段落雙標簽塊級
????? img標簽圖片單標簽行級
????? src=““圖片地址
????? alt=““圖片的文字描述（不能省略不寫）
瀏覽器在搜索圖片的時候，爬蟲會根據(jù)alt里面的文字描述將圖片顯示在頁面上，有時候文字描述與圖片不一致，會給爬蟲造成誤導，導致出現(xiàn)與搜索內容不一樣的圖片
1、文字環(huán)繞
????? 圖片浮動在最左邊，文字環(huán)繞圖片
2、設置float元素，會脫離文檔流，往設置的方向進行浮動，自己到遇到父級的邊界或者其他的浮動元素，就會停止，浮動的元素會脫離文檔流
從上面三個例子，我們可以看出，元素在設置浮動以后，會相對于自己原來的位置進行左浮或右浮，我們看到紅素方塊在最上面，它右浮之后就顯示在父級最右最上方，黃色方塊本來在中間位置，右浮之后會相對于自己原來位置向右浮動，因此會顯示第三張圖片的位置。
當紅色向左浮動，那么紅色會脫離文檔流，不占位置，黃色和綠色就會向大盒子的左上角移動，實際上黃色被紅色覆蓋在下面
3、浮動的元素不占空間
?????? 我們在給外面的大盒子不設置寬高的時候，再將里面的三個小盒子自上而下放置，會顯示如下，我們發(fā)現(xiàn)，大盒子的寬高由里面內容來決定
下面這個我們給大盒子設置高度為0，再將里面三個小盒子設置左浮動，會顯示如下，內容撐不開盒子，所以說，浮動元素不占空間
4、利用浮動可以設置我們常見的兩種布局
（1）、一端固定一端自適應布局
通常這種我們可以將左邊部分設置寬高和float：left，右邊部分設置margin-left，寬度由父級決定，就能達到常見的這種布局。
（2）、兩端等寬中間自適應布局 （圣杯布局/雙翼布局）
像這種布局我們可以設置左邊黃色和右邊黃色等寬等高，一個左浮一個右浮，，中間紅色區(qū)域設置margin-left和margin-right,min-width,中間部分會根據(jù)瀏覽器窗口大小自適應。
5、浮動元素會找對應的浮動元素，緊跟在同向的浮動元素的后面。
6、浮動屬性對塊級元素的影響：
（1）塊級元素的寬度不再跟隨父級的寬度，而是由內容決定（內容撐開寬高）
（2）行級元素設置·浮動之后就可以設置寬高以及盒模型
7、清除浮動的方法
（1）給父元素設置寬高。
這種方法可以防止父級塌陷，簡單粗暴，一般用的極少。
（2）在父元素里面的最后添加一個元素并設置clear：both
我們沒有給父級設置高度，正常情況下父級高度會在里面元素全部浮動以后產(chǎn)生塌陷，這里我們在最后寫了一個元素并設置了clear：both,它就想躲開浮動元素，就會跑到浮動元素的后面，父級向包裹住它，就會自然的撐開寬高。但是這種方法會使html文檔中出現(xiàn)很多這樣沒有意義的元素，寫起來太麻煩，而且不合語義化。
（3）偽元素清除浮動
我們可以使用::after在元素的后面虛擬出來一個偽元素，添加一個clearfix類，這樣我們在需要清除浮動的時候，只需給父元素添加一個clearfix類就可以了。
.clearfix::after {
??????????????????? content:"";
??????????????????? display:block;
??????????????????? height:0;
??????????????????? clear:both;
}
這樣利用偽元素就能避免html文檔中出現(xiàn)沒有意義的元素了，通常為了IE的兼容性，后面還會寫
.clearfix {
???????????? zoom:1;
}
(4)給父元素設置overflow：hidden；
首先我們了解一下BFC塊級格式化上下文：
所以我們給父級元素設置值overflow：hidden后，就可以讓浮動的元素參與高度計算，這樣父元素就有高度了。
