1、static定位(普通流定位) -------------- 默認定位
2、float定位(浮動定位) 例：float:left;
有兩個取值：left(左浮動)和right(右浮動)。浮動元素會在沒有浮動元素的上方，效果上看是遮擋住了沒有浮動的元素，有float樣式規則的元素是脫離文檔流的，它的父元素的高度並不能有它撐開。
右浮動：
左浮動：
當需要設置多個塊級元素同行排列時非常有用
如果父元素的寬度太窄，那么其他浮動元素會向下移動，直到有足夠的空間（左圖所示）；如果浮動元素的高度不同，那么其他浮動元素向下移動時，就有可能會出現卡住的情況（下圖所示）
注意：浮動元素的外邊緣不會超過父元素的內邊緣；浮動元素不會上下浮動；浮動元素不會互相重疊，會像行內塊元素一樣排列。
如果想要既設置浮動，又使父元素的高度被浮動元素撐開，即清除子元素浮動對父元素帶來的高度的影響，有四種方法可以實現：
假設HTML代碼部分為：
<div class="parent"> 這是父元素
<div style="float:left"> 這是子元素</div>
</div>
1) 為父元素設置固定高度 -------------缺點：不知道具體高度沒辦法設置
CSS代碼部分：
.parent{
//...
height:xxx; //某個固定值
}
2) 在父元素內，在浮動元素的下方多寫一行代碼：<div style="clear:both"></div> ------------- 缺點：增加代碼冗余
HTML代碼部分：
<div class="parent"> 這是父元素
<div style="float:left"> 這是子元素</div>
<div style="clear:both"></div>
</div>
3) 為父元素設置css規則：overflow:hidden ------------- 缺點：有時候不希望超出部分隱藏
.parent{
// ...
overflow:hidden ; //某個固定值
}
4) 內容生成 ------------- 最優的方法，推薦
CSS代碼部分：
.parent:after{
content:'';
display:'block';
clear:both;
}
3、relative定位(相對定位) position:relative;
相對本元素的左上角進行定位，top,left,bottom,right都可以有值。雖然經過定位后，位置可能會移動，但是本元素並沒有脫離文檔流，還占有原來的頁面空間。可以設置z-index。使本元素相對於文檔流中的元素，或者脫離文檔流但是z-index的值比本元素的值要小的元素更加靠近用戶的視線。
相對定位最大的作用是為了實現某個元素相對於本元素的左上角絕對定位，本元素需要設置position為relative。
4、absolute定位(絕對定位) position:absolute;
相對於祖代中有relative(相對定位)並且離本元素層級關系上是最近的元素的左上角進行定位，如果在祖代元素中沒有有relative定位的，就默認相對於body進行定位。
絕對定位是脫離文檔流的，與浮動定位是一樣的效果，會壓在非定位元素的上方。可以設置z-index屬性。
注意：當同時有浮動元素和絕對定位元素出現並且浮動元素沒有設置z-index，浮動元素是壓在絕對定位元素上的，即離用戶的視線更近。