摘要：概覽為定位和浮動(dòng)提供了一些屬性，利用這些屬性，可以建立各種布局，極大提高頁(yè)面的表現(xiàn)力。定位屬性規(guī)定元素的定位類(lèi)型。絕對(duì)定位元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。在使用相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來(lái)的空間。

CSS 為定位和浮動(dòng)提供了一些屬性，利用這些屬性，可以建立各種布局，極大提高HTML頁(yè)面的表現(xiàn)力。

定位的基本思想很簡(jiǎn)單，它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素，或者另一個(gè)元素甚至瀏覽器窗口本身的位置。

CSS 有三種基本的定位機(jī)制：

普通流，包含默認(rèn)定位（static）和相對(duì)定位（relative）。

浮動(dòng) float.

絕對(duì)定位，包含 absolute 和 fixed.

在 CSS 盒模型 一文中簡(jiǎn)單的認(rèn)識(shí)了元素框的概念（主要是塊框），這里再進(jìn)行部分補(bǔ)充。

div、h1 或 p 元素常常被稱(chēng)為 塊級(jí)元素 。這意味著這些元素顯示為一塊內(nèi)容，即 塊框 。與之相反，span 和 strong 等元素稱(chēng)為 行內(nèi)元素，這是因?yàn)樗鼈兊膬?nèi)容顯示在行中，即 行內(nèi)框。不過(guò)，您可以使用 display 屬性改變生成的框的類(lèi)型。

還有一種框叫 無(wú)名框。這種情況發(fā)生在把一些文本添加到一個(gè)塊級(jí)元素（比如 div）中。假設(shè)有一個(gè)包含三行文本的段落，每行文本形成一個(gè) 無(wú)名框。

some text - 無(wú)名框

Some more text. - 無(wú)名框


Some more test. - 無(wú)名框
google - 行內(nèi)框


Some more test. - 無(wú)名框

在HTML默認(rèn)布局中，塊框從上到下一個(gè)接一個(gè)地排列，框之間的垂直距離是由框的垂直外邊距計(jì)算出來(lái)（注意外邊距值合并的情況）。

行內(nèi)框在一行中水平布置?？梢允褂盟絻?nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。

引用 張?chǎng)涡?文章中對(duì)框的描述：

這是一行普通的文字，這里有個(gè) em 標(biāo)簽。

這段HTML代碼涉及到四種 boxes:

首先是 p 標(biāo)簽所在的 containing box,此box包含了其他的boxes;

然后就是 inline boxes,如圖標(biāo)注；

被標(biāo)簽包圍的叫行內(nèi)框，如果是光禿禿的文字，則屬于匿名行內(nèi)框（無(wú)名框）。

line boxes，見(jiàn)下圖標(biāo)注；

在 containing boxes 里，一個(gè)一個(gè)的 inline boxes 組成了 line boxes。

content area，見(jiàn)下圖標(biāo)注；

content area 是一種圍繞文字看不見(jiàn)的box。content area 的大小與 font-size 大小相關(guān)。

position 屬性規(guī)定元素的定位類(lèi)型。有以下 5 種值可供選擇。

任何元素都可以定位，不過(guò) absolute 或 fixed 會(huì)生成一個(gè)塊級(jí)框，而不論該元素本身是什么類(lèi)型。相對(duì)定位元素會(huì)相對(duì)于它在正常流中的默認(rèn)位置偏移。

元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。元素定位后生成一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中是何種類(lèi)型的框。

絕對(duì)定位的元素的位置相對(duì)于 最近的已定位祖先元素（這里的已定位元素指除 static默認(rèn)定位的其余三種），如果元素沒(méi)有已定位的祖先元素，那么它的位置相對(duì)于 最初的包含塊。

#box2 {
    position: absolute;
    left: 30px;
    top: 20px;
}

因?yàn)榻^對(duì)定位的框與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其它元素?？梢酝ㄟ^(guò)設(shè)置 z-index 屬性來(lái)控制這些框的堆放次序。

固定定位類(lèi)似于將 position 設(shè)置為 absolute，不過(guò)其包含塊是視窗本身。

fixed 是一種特殊的絕對(duì)定位，對(duì)其設(shè)置的偏移量永遠(yuǎn)是相對(duì)于視窗本身。我們常見(jiàn)到的導(dǎo)航條固定在頁(yè)面頂部，回到頁(yè)面頂部按鈕基本都是采用此定位方式。

div#top {
    position: fixed;
    right: 5px;
    bottom: 5px;
}

同樣可以通過(guò)設(shè)置 z-index 屬性來(lái)控制這些框的堆放次序。

元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

在使用相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來(lái)的空間。同樣可以通過(guò)設(shè)置 z-index 屬性來(lái)控制這些框的堆放次序。

元素框正常生成，按框類(lèi)型正常定位。

浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到 包含框或 另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>

浮動(dòng)和絕對(duì)定位類(lèi)似（由于其是否脫離文檔流存在爭(zhēng)議故這里避而不談），可能會(huì)覆蓋掉頁(yè)面正常的框。

向右浮動(dòng)，原來(lái)的空間被其他框所占用。

向左浮動(dòng)，覆蓋其他框。

三個(gè)框都浮動(dòng)，后面的框碰著前一個(gè)框的邊框順序排列。

當(dāng)一行無(wú)法容納下完整的一個(gè)框時(shí)，自動(dòng)從下一行依次排列。

如果一行中無(wú)法容納所有浮動(dòng)框，后面的框會(huì)從下一行依次排列，排列起始位置取決于第一行已經(jīng)排好的框的高度，以已經(jīng)排好的行的最后一個(gè)框的高度為基準(zhǔn)，從后往前找比此基準(zhǔn)高的框，如果找到則起始位置為找到的這個(gè)框的下一個(gè)框的下面，如果沒(méi)有找到比此基準(zhǔn)高的框則從第一個(gè)往后排，始終保證新一行所有框的頂部與基準(zhǔn)框的底部處于同一水平線(xiàn)上。（語(yǔ)言描述太麻煩了，我自己看都快暈了，看圖吧）

圖中第一行為排好的，其中框一高度最大，框三次之，其余三個(gè)高度相同，以框五為基準(zhǔn)，往前找比框五大的，找到了框三，第二行第一個(gè)位置即為框四的下面（框三的下一個(gè)），框六，框七的頂部與框五的底部保持同一水平線(xiàn)（即使框四的高度小于80px,也應(yīng)該同框五底部保持一致），框八以框七為基準(zhǔn)繼續(xù)往前找。

我們上面也說(shuō)了，浮動(dòng)可能會(huì)覆蓋別的框，但有例外。

當(dāng)行框與浮動(dòng)框相遇時(shí)，浮動(dòng)框旁邊的行框被縮短，從而給浮動(dòng)框留出空間，行框圍繞浮動(dòng)框，這里的行框也僅限于普通文檔流中的行框（絕對(duì)定位中的文本還是會(huì)被覆蓋的）。

浮動(dòng)框確實(shí)覆蓋了p元素框，但是文本沒(méi)有被覆蓋，換句話(huà)說(shuō)就是行框被縮短。

有時(shí)我們僅僅希望使用浮動(dòng)來(lái)進(jìn)行文檔布局，浮動(dòng)元素的尺寸仍然保留，這就需要用到浮動(dòng)清除（clear）了。

用下面這個(gè)實(shí)際場(chǎng)景來(lái)介紹浮動(dòng)清除的使用吧。

假設(shè)希望讓一個(gè)圖片浮動(dòng)在左邊，文本塊浮動(dòng)在右邊，并且希望這幅圖片和文本包含在另一個(gè)具有背景顏色和邊框的元素中。

由于浮動(dòng)，容器將無(wú)法包圍他們，當(dāng)然無(wú)法達(dá)到我們想要的效果。

由于兩個(gè)塊都是浮動(dòng)的，無(wú)法對(duì)他們進(jìn)行清除浮動(dòng)，所以只能借助第三方了。

我們使用一個(gè)空的div元素以實(shí)現(xiàn)下圖的目標(biāo)。

div.clear {
    clear: both;
}

清除浮動(dòng)的方式當(dāng)然不止上面一種，但上面的方式兼容性強(qiáng)，使用方便，是初學(xué)時(shí)使用的上佳之選。

下面再介紹兩種不錯(cuò)的選擇。

overflow + zoom 方法

.clearfix{overflow:hidden; zoom:1;}

after + zoom 方法

.clearfix{zoom:1;}
.clearfix:after{display:block; content:"clear"; clear:both; line-height:0; visibility:hidden;}

此方法可以說(shuō)是綜合起來(lái)最好的方法，不會(huì)影響任何其他樣式，通用性強(qiáng)，覆蓋面廣。

除了上面介紹的主要屬性，與定位和框相關(guān)聯(lián)的其他屬性也順道一起簡(jiǎn)要了解一下吧。

z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面，其值可正可負(fù)，默認(rèn)為0。

img.x {
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

display 屬性規(guī)定元素應(yīng)該生成的框的類(lèi)型。通過(guò)此屬性你可以輕松的實(shí)現(xiàn)塊級(jí)元素與行級(jí)元素的互轉(zhuǎn)，甚至可以通過(guò)此屬性是元素脫離文檔流隱藏起來(lái)。

常用的也就：none, block, inline, inline-block。

a#top {
    display: none;
}

記住常用的即可，其余的僅供查閱。

visibility 屬性規(guī)定元素是否可見(jiàn)。

h2 {
    visibility:hidden;
}

注意：使用此屬性，即使不可見(jiàn)的元素也會(huì)占據(jù)頁(yè)面上的空間。請(qǐng)使用 display 屬性來(lái)創(chuàng)建不占據(jù)頁(yè)面空間的不可見(jiàn)元素。

clip 屬性用來(lái)剪裁絕對(duì)定位元素。這個(gè)屬性可以定義一個(gè)剪裁矩形。對(duì)于一個(gè)絕對(duì)定位元素，在這個(gè)矩形內(nèi)的內(nèi)容才可見(jiàn)。剪裁區(qū)域可能比元素大，也可能比元素小。

該屬性的默認(rèn)值為 auto , 不應(yīng)用任何剪裁。

position: absolute;
clip: rect (top, right, bottom, left);

top, bottom 都是相對(duì)于包圍此元素的祖先元素上框的距離。right, left 都是相對(duì)于包圍此元素的祖先元素左框的距離。

四個(gè)尺寸圍成一個(gè)矩形，元素在此矩形內(nèi)的部分被顯現(xiàn)出來(lái)。

img {
    position:absolute;
    clip:rect(0px 50px 200px 0px)
}

光標(biāo)定位應(yīng)該叫光標(biāo)樣式，此屬性用來(lái)設(shè)置當(dāng)鼠標(biāo)移動(dòng)到元素上鼠標(biāo)應(yīng)該呈現(xiàn)的樣式。這個(gè)內(nèi)容很簡(jiǎn)單，直接貼出示例。

請(qǐng)將代碼自行添加到HTML文件中檢驗(yàn)效果。

auto

crosshair

default

pointer

move

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

text

wait

help

overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。

div {
    background-color:#00FFFF;
    width:150px;
    height:150px;
    overflow: scroll
}

如果值為 scroll，不論是否需要，用戶(hù)代理都會(huì)提供一種滾動(dòng)機(jī)制。因此，有可能即使元素框中可以放下所有內(nèi)容也會(huì)出現(xiàn)滾動(dòng)條。

vertical-align 屬性設(shè)置元素的垂直對(duì)齊方式。

該屬性定義行內(nèi)元素的基線(xiàn)相對(duì)于該元素所在行的基線(xiàn)的垂直對(duì)齊。允許指定負(fù)長(zhǎng)度值和百分比值。

在表單元格中，這個(gè)屬性會(huì)設(shè)置單元格框中的單元格內(nèi)容的對(duì)齊方式。

具體樣式請(qǐng)將代碼自行添加到HTML文檔中驗(yàn)證。

這是一幅H2OX2 baseline 對(duì)齊的圖像。
 

這是一幅H2OX2 sub 對(duì)齊的圖像。
 

這是一幅H2OX2 super 對(duì)齊的圖像。


這是一幅H2OX2 top 對(duì)齊的圖像。


這是一幅H2OX2 text-top 對(duì)齊的圖像。
 

這是一幅H2OX2 middle對(duì)齊的圖像。


這是一幅H2OX2 bottom 對(duì)齊的圖像。


這是一幅H2OX2 text-bottom 對(duì)齊的圖像。


這是一幅H2OX2 24px 對(duì)齊的圖像。


這是一幅H2OX2 0px 對(duì)齊的圖像。


這是一幅H2OX2 -50px 對(duì)齊的圖像。


這是一幅H2OX2 20% 對(duì)齊的圖像。

CSS 定位和浮動(dòng)是HTML布局中的重要部分，需要認(rèn)真參透。注意掌握定位的幾種類(lèi)型及區(qū)別，理解浮動(dòng)的排列及清除，掌握與定位相關(guān)的一些屬性。

篇幅還是稍長(zhǎng)，估計(jì)大伙都沒(méi)時(shí)間看完了。

CSS float浮動(dòng)的深入研究、詳解及拓展(一)

CSS float浮動(dòng)的深入研究、詳解及拓展(二)

還有一篇討論浮動(dòng)是不是脫離文檔流的帖子：float 有沒(méi)有脫離文檔流 ？？