CSS定位/浮動(dòng)——position/float
CSS 為定位和浮動(dòng)提供了一些屬性褒纲，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個(gè)表格才能完成的任務(wù)搬素。
定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置魏保，或者相對于父元素熬尺、另一個(gè)元素甚至瀏覽器窗口本身的位置。顯然谓罗，這個(gè)功能非常強(qiáng)大粱哼，也很讓人吃驚。要知道檩咱，用戶代理對 CSS2 中定位的支持遠(yuǎn)勝于對其它方面的支持揭措，對此不應(yīng)感到奇怪胯舷。
1、簡述
例如
div绊含、h1需纳、p元素為塊元素；strong艺挪、span元素為行內(nèi)元素通過
display屬性可改變這些元素的類型CSS定位的機(jī)制有：普通流、浮動(dòng)兵扬、絕對定位
2麻裳、static定位：
HTML元素的默認(rèn)值，即沒有定位器钟，元素出現(xiàn)在正常流中元素框正常生成津坑。塊級元素生成一個(gè)矩形框，作為文檔流的一部分傲霸，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框疆瑰，置于其父元素中
靜態(tài)定位的元素不會(huì)受到top、right昙啄、bottom穆役、left影響
3、fixed定位：
元素的位置相對于瀏覽器窗口是固定位置梳凛，即使窗口是滾動(dòng)的它也不會(huì)移動(dòng)
例如：固定一個(gè)p段落在距離瀏覽器上方30px耿币，距離右方5px：
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
4、relative（相對定位）:
相對定位元素的定位是相對其正常位置：
注意：==在使用相對定位時(shí)韧拒，無論是否進(jìn)行移動(dòng)淹接，元素仍然占據(jù)原來的空間==。因此叛溢，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框
例如：h2標(biāo)簽相對于正常位置向右移動(dòng)了20px
h2.pos_left
{
position:relative;
left:20px;
}
5塑悼、absolute（絕對定位）：
絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素楷掉，那么它的位置相對于最初的包含塊<html>或者畫布<canvas>:
注意：absolute定位使元素的位置與文檔流無關(guān)厢蒜，因此不占據(jù)空間，而且==可以覆蓋頁面上的其它元素==
例如：h2標(biāo)簽被放在距離左邊的頁面100 px和距離頁面的頂部150 px的元素:
h2
{
position:absolute;
left:100px;
top:150px;
}
6靖诗、重疊的元素：
當(dāng)相對定位或絕對定位出現(xiàn)重疊的元素時(shí)郭怪，z-index指定了一個(gè)元素堆疊的順序
例如：設(shè)定img在其他與它重疊元素的下邊：
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
注意：如果兩個(gè)定位元素重疊，沒有指定z - index刊橘，最后定位在HTML代碼中的元素將被顯示在最前面==具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面==鄙才。具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面
7、CSS定位的其他屬性：
（1）overflow屬性：
值為
scroll時(shí)促绵，當(dāng)內(nèi)容溢出元素框時(shí)會(huì)出現(xiàn)滾動(dòng)條值為
hidden時(shí)攒庵，當(dāng)內(nèi)容溢出元素框時(shí)將會(huì)隱藏溢出的內(nèi)容
（2）clip屬性：
clip屬性剪裁絕對定位元素clip屬性的唯一合法值為：clip:rect(top,right,bottom,left)
8嘴纺、浮動(dòng)屬性——float
元素的水平浮動(dòng)，意味元素只能左右移動(dòng)
一個(gè)元素會(huì)盡量水平浮動(dòng)浓冒，直到它碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?br> 浮動(dòng)元素之后的元素將圍繞它
如果圖像是右浮動(dòng)栽渴，下面的文本流將環(huán)繞在它左邊
（1）彼此相鄰的浮動(dòng)元素：
如果你把幾個(gè)浮動(dòng)的元素放到一起，如果有空間的話稳懒，它們將彼此相鄰
例如對圖片廊使用float屬性：
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
（2）清除浮動(dòng)——clear屬性：
元素浮動(dòng)之后闲擦，周圍的元素會(huì)重新排列，為了避免這種情況场梆，使用clear屬性墅冷。clear屬性指定元素兩側(cè)不能出現(xiàn)浮動(dòng)元素
