驚呆！原來position和float還可以這樣！
前幾天有小夥伴在後臺問橘子，初學前端不怎麼理解float和position，所以今天就仔細講一講關於元素的浮動和定位。
一：Float
怎麼看待一個新的事物？當然是站在巨人的肩膀上！
MDN文檔中這樣定義Float：
CSS屬性指定一個元素應沿其容器的左側或右側放置，允許文本和內聯元素環繞它。該元素從網頁的正常流動(文檔流)中移除，儘管仍然保持部分的流動性（與絕對定位相反）。
float的常用屬性一般有三個：left、right、none。
接下來咱們每個細化：
解釋：float：left；
表明元素必須浮動在其所在的塊容器左側的關鍵字。也就是說：被添加浮動的元素向左浮動。
解釋：float：right；
表明元素必須浮動在其所在的塊容器右側的關鍵字。也就是說：被添加浮動的元素向右浮動。
解釋：float：none；
表明元素不進行浮動的關鍵字。也就是說：此元素未被加入浮動。
由上可以總結出關於浮動的特性：
（1）浮動的元素會脫離標準流
脫離標準流的控制移動到指定位置浮動的盒子不會保留原先的位置（可以看到左浮動的時候文字是被填充到window窗口的最右側，但是當盒子右浮動的時候文字是被填充到window窗口的最左側）
（2）浮動的元素會在一行顯示
如圖：如果多個盒子同時添加浮動則盒子會按照屬性值在一行內顯示並且頂端對齊排列
（3）添加浮動的元素會具有行內塊的特點（行內塊：在一行內可以顯示多個塊級元素）
如圖：因爲span是行內元素，所以直接設置span的寬高是無效的，但是通過對span添加浮動之後是可以進行直接設置其寬高。
橘子覺得最好的編程老師就是鍵盤，心動不如行動！快去編寫吧！
二：Position
MDN文檔這樣定義position：
CSS position屬性用於指定一個元素在文檔中的定位方式。
它的常用屬性一般有四個：static、relative、absolute、fixed；
接下來咱們每個細化：
解釋：position：static；（靜態定位）
所謂靜態定位就是按照標準流特性擺放位置，它沒有邊偏移（top、bottom、left、right），也就是說此時 top, right, bottom, left 和 z-index 屬性無效！所以說這種定位方式在佈局時很少用到；
解釋：position：relative；（相對定位）
相對定位就是在元素移動位置的時候，是相對於它原來的位置來說的。相對定位是以原來的位置來移動的（移動位置的時候參照點是自己原來的位置）；
需要注意的是：使用了絕對定位到盒子，還是會繼續佔有原來的位置。（顧名思義就是，即使添加了相對定位的盒子離開原來的位置，它原來所佔有的地方其它元素還是不可以佔有）
解釋：position：absolute；（絕對定位）
絕對定位就是相對於父元素移動的
**注意: **
（1）如果父元素沒有定位就會以瀏覽器爲準！
（2）如果父級元素添加了相對定位、固定定位中的其中一種，那麼添加絕對定位的子元素會以添加定位的父級元素爲移動基準！
（3）添加了絕對定位的盒子會脫離標準流！
解釋：position：fixed；（固定定位）
固定定位是元素固定於瀏覽器可視區的位置，顧名思義，也就是用戶的屏幕位置。（一般的運用場景是，在用戶滑動頁面時，被添加固定定位的元素在網頁左右兩側位置不變。沒錯！就是廣告經常用的！
那麼實際開發中如何運用定位呢？
通常的運用方式是：相對定位+相對定位通過對父級元素添加相對定位，這樣子元素在添加固定定位的時候就會在父盒子裏自由移動了！
我是橘子，一個高達帥氣的程序員！