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

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

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

CSS 有三種基本的定位機制：

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

浮動 float.

絕對定位，包含 absolute 和 fixed.

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

div、h1 或 p 元素常常被稱為 塊級元素 。這意味著這些元素顯示為一塊內(nèi)容，即 塊框 。與之相反，span 和 strong 等元素稱為 行內(nèi)元素，這是因為它們的內(nèi)容顯示在行中，即 行內(nèi)框。不過，您可以使用 display 屬性改變生成的框的類型。

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

some text - 無名框

Some more text. - 無名框


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


Some more test. - 無名框

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

行內(nèi)框在一行中水平布置。可以使用水平內(nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。

引用 張鑫旭 文章中對框的描述：

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

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

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

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

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

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

在 containing boxes 里，一個一個的 inline boxes 組成了 line boxes。

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

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

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

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

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

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

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

因為絕對定位的框與文檔流無關(guān)，所以它們可以覆蓋頁面上的其它元素。可以通過設(shè)置 z-index 屬性來控制這些框的堆放次序。

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

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

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

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

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

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

元素框正常生成，按框類型正常定位。

浮動的框可以向左或向右移動，直到它的外邊緣碰到 包含框或 另一個浮動框的邊框為止。

浮動和絕對定位類似（由于其是否脫離文檔流存在爭議故這里避而不談），可能會覆蓋掉頁面正常的框。

向右浮動，原來的空間被其他框所占用。

向左浮動，覆蓋其他框。

三個框都浮動，后面的框碰著前一個框的邊框順序排列。

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

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

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

我們上面也說了，浮動可能會覆蓋別的框，但有例外。

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

浮動框確實覆蓋了p元素框，但是文本沒有被覆蓋，換句話說就是行框被縮短。

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

用下面這個實際場景來介紹浮動清除的使用吧。

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

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

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

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

div.clear {
    clear: both;
}

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

下面再介紹兩種不錯的選擇。

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;}

此方法可以說是綜合起來最好的方法，不會影響任何其他樣式，通用性強，覆蓋面廣。

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

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

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

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

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

a#top {
    display: none;
}

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

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

h2 {
    visibility:hidden;
}

注意：使用此屬性，即使不可見的元素也會占據(jù)頁面上的空間。請使用 display 屬性來創(chuàng)建不占據(jù)頁面空間的不可見元素。

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

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

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

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

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

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

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

請將代碼自行添加到HTML文件中檢驗效果。

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)容溢出元素框時發(fā)生的事情。

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

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

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

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

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

具體樣式請將代碼自行添加到HTML文檔中驗證。

這是一幅H2OX2 baseline 對齊的圖像。
 

這是一幅H2OX2 sub 對齊的圖像。
 

這是一幅H2OX2 super 對齊的圖像。


這是一幅H2OX2 top 對齊的圖像。


這是一幅H2OX2 text-top 對齊的圖像。
 

這是一幅H2OX2 middle對齊的圖像。


這是一幅H2OX2 bottom 對齊的圖像。


這是一幅H2OX2 text-bottom 對齊的圖像。


這是一幅H2OX2 24px 對齊的圖像。


這是一幅H2OX2 0px 對齊的圖像。


這是一幅H2OX2 -50px 對齊的圖像。


這是一幅H2OX2 20% 對齊的圖像。

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

篇幅還是稍長，估計大伙都沒時間看完了。

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

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

還有一篇討論浮動是不是脫離文檔流的帖子：float 有沒有脫離文檔流 ？？