CSS定位/浮動——position/float
CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個(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ī)制有：普通流、浮動、絕對定位
2、static定位：
HTML元素的默認(rèn)值，即沒有定位，元素出現(xiàn)在正常流中元素框正常生成。塊級元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中
靜態(tài)定位的元素不會受到top、right、bottom、left影響
3、fixed定位：
元素的位置相對于瀏覽器窗口是固定位置，即使窗口是滾動的它也不會移動
例如：固定一個(gè)p段落在距離瀏覽器上方30px，距離右方5px：
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
4、relative（相對定位）:
相對定位元素的定位是相對其正常位置：
注意：==在使用相對定位時(shí)，無論是否進(jìn)行移動，元素仍然占據(jù)原來的空間==。因此，移動元素會導(dǎo)致它覆蓋其它框
例如：h2標(biāo)簽相對于正常位置向右移動了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í)會出現(xiàn)滾動條值為
hidden時(shí)，當(dāng)內(nèi)容溢出元素框時(shí)將會隱藏溢出的內(nèi)容
（2）clip屬性：
clip屬性剪裁絕對定位元素clip屬性的唯一合法值為：clip:rect(top,right,bottom,left)
8、浮動屬性——float
元素的水平浮動，意味元素只能左右移動
一個(gè)元素會盡量水平浮動，直到它碰到包含框或另一個(gè)浮動框的邊框?yàn)橹?br> 浮動元素之后的元素將圍繞它
如果圖像是右浮動，下面的文本流將環(huán)繞在它左邊
（1）彼此相鄰的浮動元素：
如果你把幾個(gè)浮動的元素放到一起，如果有空間的話，它們將彼此相鄰
例如對圖片廊使用float屬性：
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
（2）清除浮動——clear屬性：
元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用clear屬性。clear屬性指定元素兩側(cè)不能出現(xiàn)浮動元素
