定位指的是更改元素的默認排列方式
1. 普通流定位(文檔流定位)
默認模式排列，塊級元素從上到下，行級元素從左到右
2. 浮動定位
float:left/right/none;
- 特點：
浮動元素脫離文檔流，不在佔據空間。如果一行顯示不下，會自動換行（可能被卡主），添加了浮動的元素會變成塊級元素（也符合行內塊的特點），並且也可以設置margin屬性。
- 影響：
- 元素浮動會由於脫離了自身的文檔流，影響後續元素佈局
- 添加了浮動的元素會影響父元素的高度
- 解決方案：
- 清除自身元素前面的浮動
- 給父元素設置高度，但是大部分情況下高度不固定（不推薦）
- 給父元素加浮動，但同時也會影響父元素的後續元素（不推薦）
- 在父元素的最後添加一個空標籤（必須爲塊級元素），並且設置屬性
clear:both；但如果頁面空標籤多了，會影響性能 - 給父元素設置
overflow:hidden/auto; - 給父元素設置如下屬性（推薦使用）
:after {
content:"";
display:block;
clear:both;
height:0;
line-height:0;
visibility:hidden;
}
3. 相對定位
position:relative;
保留自身空間（脫離文檔流），相對於原來位置定位。並配合偏移屬性left/right/top/bottom一起使用。
4. 絕對定位
position:absolute;
不保留自身空間，相對於離自身最近的已定位的祖先元素進行定位，如果找不到，就相對body進行定位。並配合偏移屬性left/right/top/bottom一起使用。
5. 固定定位
position:fixed;
永遠相對於瀏覽器頁面進行定位，並配合偏移屬性left/right/top/bottom一起使用。
6.彈性佈局定位
display:flex;
彈性定位是一種新的定位方式，他自身具有一些計算能力，可以減少在佈局時的很多計算問題，本文不多做介紹。詳情語法點擊這裏