CSS 定位 浮動

概覽

CSS 爲定位和浮動提供了一些屬性，利用這些屬性，能夠創建各類佈局，極大提升HTML頁面的表現力。

定位的基本思想很簡單，它容許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素，或者另外一個元素甚至瀏覽器窗口自己的位置。

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

• 普通流，包含默認定位（static）和相對定位（relative）。

• 浮動 float.

• 絕對定位，包含 absolute 和 fixed.

一切皆爲框

在 CSS 盒模型 一文中簡單的認識了元素框的概念（主要是塊框），這裏再進行部分補充。

div、h1 或 p 元素經常被稱爲 塊級元素 。這意味着這些元素顯示爲一塊內容，即 塊框 。與之相反，span 和 strong 等元素稱爲 行內元素，這是由於它們的內容顯示在行中，即 行內框。不過，您可使用 display 屬性改變生成的框的類型。

還有一種框叫 無名框。這種狀況發生在把一些文本添加到一個塊級元素（好比 div）中。假設有一個包含三行文本的段落，每行文本造成一個 無名框。

<div>
some text - 無名框
<p>
Some more text. - 無名框
<br>
Some more test. - 無名框
<span>google</span> - 行內框
<br>
Some more test. - 無名框
</p>
</div>

在HTML默認佈局中，塊框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來（注意外邊距值合併的狀況）。

行內框在一行中水平佈置。可使用水平內邊距、邊框和外邊距調整它們的間距。可是，垂直內邊距、邊框和外邊距不影響行內框的高度。

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

<p>這是一行普通的文字，這裏有個 <em>em</em> 標籤。</p>

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

1. 首先是 p 標籤所在的 containing box,此box包含了其餘的boxes;

2. 而後就是 inline boxes,如圖標註；
   

被標籤包圍的叫行內框，若是是光禿禿的文字，則屬於匿名行內框（無名框）。

1. line boxes，見下圖標註；
   

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

1. content area，見下圖標註；
   

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

定位 position

position 屬性規定元素的定位類型。有如下 5 種值可供選擇。

值	描述
absolute	<p>生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。</p> <p>元素的位置經過 left, top, right 以及 bottom 屬性進行規定。</p>
fixed	<p>生成絕對定位的元素，相對於瀏覽器窗口進行定位。</p> <p>元素的位置經過 left, top, right 以及 bottom 屬性進行規定。</p>
relative	<p>生成相對定位的元素，相對於其正常位置進行定位。</p> <p>元素的位置經過 left, top, right 以及 bottom 屬性進行規定。</p>
static	默認值。沒有定位，元素出如今正常的流中（忽略 left, top, right, bottom 以及 z-index 聲明）。
inherit	從父元素繼承，IE8以前不支持。

任何元素均可以定位，不過 absolute 或 fixed 會生成一個塊級框，而不論該元素自己是什麼類型。相對定位元素會相對於它在正常流中的默認位置偏移。

絕對定位 absolute

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

絕對定位的元素的位置相對於 最近的已定位祖先元素（這裏的已定位元素指除 static默認定位的其他三種），若是元素沒有已定位的祖先元素，那麼它的位置相對於 最初的包含塊。

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

由於絕對定位的框與文檔流無關，因此它們能夠覆蓋頁面上的其它元素。能夠經過設置 z-index 屬性來控制這些框的堆放次序。

固定定位 fixed

固定定位相似於將 position 設置爲 absolute，不過其包含塊是視窗自己。

fixed 是一種特殊的絕對定位，對其設置的偏移量永遠是相對於視窗自己。咱們常見到的導航條固定在頁面頂部，回到頁面頂部按鈕基本都是採用此定位方式。

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

一樣能夠經過設置 z-index 屬性來控制這些框的堆放次序。

相對定位 relative

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

在使用相對定位時，不管是否進行移動，元素仍然佔據原來的空間。一樣能夠經過設置 z-index 屬性來控制這些框的堆放次序。

默認定位 static

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

浮動 float

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

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

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

向左浮動，覆蓋其餘框。

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

當一行沒法容納下完整的一個框時，自動從下一行依次排列。

若是一行中沒法容納全部浮動框，後面的框會從下一行依次排列，排列起始位置取決於第一行已經排好的框的高度，以已經排好的行的最後一個框的高度爲基準，從後往前找比此基準高的框，若是找到則起始位置爲找到的這個框的下一個框的下面，若是沒有找到比此基準高的框則從第一個日後排，始終保證新一行全部框的頂部與基準框的底部處於同一水平線上。（語言描述太麻煩了，我本身看都快暈了，看圖吧）

圖中第一行爲排好的，其中框一高度最大，框三次之，其他三個高度相同，以框五爲基準，往前找比框五大的，找到了框三，第二行第一個位置即爲框四的下面（框三的下一個），框六，框七的頂部與框五的底部保持同一水平線（即便框四的高度小於80px,也應該同框五底部保持一致），框八以框七爲基準繼續往前找。

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

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

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

有時咱們僅僅但願使用浮動來進行文檔佈局，浮動元素的尺寸仍然保留，這就須要用到浮動清除（clear）了。

浮動清除 clear

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

假設但願讓一個圖片浮動在左邊，文本塊浮動在右邊，而且但願這幅圖片和文本包含在另外一個具備背景顏色和邊框的元素中。

因爲浮動，容器將沒法包圍他們，固然沒法達到咱們想要的效果。

因爲兩個塊都是浮動的，沒法對他們進行清除浮動，因此只能藉助第三方了。

咱們使用一個空的div元素以實現下圖的目標。

div.clear {
    clear: both;
}

清除浮動的方式固然不止上面一種，但上面的方式兼容性強，使用方便，是初學時使用的上佳之選。

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

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

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

相關屬性

除了上面介紹的主要屬性，與定位和框相關聯的其餘屬性也順道一塊兒簡要了解一下吧。

堆疊順序 z-index

z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素老是會處於堆疊順序較低的元素的前面，其值可正可負，默認爲0。

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

框類型 display

display 屬性規定元素應該生成的框的類型。經過此屬性你能夠輕鬆的實現塊級元素與行級元素的互轉，甚至能夠經過此屬性是元素脫離文檔流隱藏起來。

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

值	描述
none	此元素不會被顯示。
block	此元素將顯示爲塊級元素。
inline	此元素會被顯示爲內聯元素。
inline-block	行內塊元素。
list-item	此元素會做爲列表顯示。
run-in	此元素會根據上下文做爲塊級元素或內聯元素顯示。
table	此元素會做爲塊級表格來顯示。
inline-table	此元素會做爲內聯表格來顯示。
table-row-group	此元素會做爲一個或多個行的分組來顯示（相似 <tbody>）。
table-header-group	此元素會做爲一個或多個行的分組來顯示（相似 <thead>）。
table-footer-group	此元素會做爲一個或多個行的分組來顯示（相似 <tfoot>）。
table-row	此元素會做爲一個表格行顯示（相似 <tr>）。
table-column-group	此元素會做爲一個或多個列的分組來顯示（相似 <colgroup>）。
table-column	此元素會做爲一個單元格列顯示（相似 <col>）
table-cell	此元素會做爲一個表格單元格顯示（相似 <td> 和 <th>）
table-caption	此元素會做爲一個表格標題顯示（相似 <caption>）
inherit	規定應該從父元素繼承 display 屬性的值。

a#top {
    display: none;
}

記住經常使用的便可，其他的僅供查閱。

可見性 visibility

visibility 屬性規定元素是否可見。

值	描述
visible	默認值。元素可見。
hidden	元素不可見。
collapse	當在表格元素中使用時，此值可刪除一行或一列，可是它不會影響表格的佈局。被行或列佔據的空間會留給其餘內容使用。若是此值被用在其餘的元素上，會呈現爲 hidden。
inherit	從父元素繼承。

h2 {
    visibility:hidden;
}

注意：使用此屬性，即便不可見的元素也會佔據頁面上的空間。請使用 display 屬性來建立不佔據頁面空間的不可見元素。

絕對定位剪裁 clip

clip 屬性用來剪裁絕對定位元素。這個屬性能夠定義一個剪裁矩形。對於一個絕對定位元素，在這個矩形內的內容纔可見。剪裁區域可能比元素大，也可能比元素小。

該屬性的默認值爲 auto , 不該用任何剪裁。

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

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

四個尺寸圍成一個矩形，元素在此矩形內的部分被顯現出來。

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

光標定位 cursor

光標定位應該叫光標樣式，此屬性用來設置當鼠標移動到元素上鼠標應該呈現的樣式。這個內容很簡單，直接貼出示例。

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

<span style="cursor:auto;">auto</span><br />
<span style="cursor:crosshair;">crosshair</span><br />
<span style="cursor:default;">default</span><br />
<span style="cursor:pointer;">pointer</span><br />
<span style="cursor:move;">move</span><br />
<span style="cursor:e-resize;">e-resize</span><br />
<span style="cursor:ne-resize;">ne-resize</span><br />
<span style="cursor:nw-resize;">nw-resize</span><br />
<span style="cursor:n-resize;">n-resize</span><br />
<span style="cursor:se-resize;">se-resize</span><br />
<span style="cursor:sw-resize;">sw-resize</span><br />
<span style="cursor:s-resize;">s-resize</span><br />
<span style="cursor:w-resize;">w-resize</span><br />
<span style="cursor:text;">text</span><br />
<span style="cursor:wait;">wait</span><br />
<span style="cursor:help;">help</span>

框溢出 overflow

overflow 屬性規定當內容溢出元素框時發生的事情。

值	描述
visible	默認值。內容不會被修剪，會呈如今元素框以外。
hidden	內容會被修剪，而且其他內容是不可見的。
scroll	內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto	若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit	從父元素繼承。

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

若是值爲 scroll，不管是否須要，用戶代理都會提供一種滾動機制。所以，有可能即便元素框中能夠放下全部內容也會出現滾動條。

垂直對齊 vertical-align

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

該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。容許指定負長度值和百分比值。

在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。

值	描述
baseline	默認。元素放置在父元素的基線上。
sub	垂直對齊文本的下標。
super	垂直對齊文本的上標
top	把元素的頂端與行中最高元素的頂端對齊
text-top	把元素的頂端與字體的頂端對齊
middle	把此元素放置在中部。
bottom	把元素的頂端與行中最低的元素的頂端對齊。
text-bottom	把元素的底端與字體的底端對齊。
length
%	使用 "line-height" 屬性的百分比值來排列此元素。容許使用負值。
inherit	從父元素繼承。

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

<p>
這是一幅H<SUB>2</SUB>O<img src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> baseline 對齊的圖像。
</p> 
<p>
這是一幅H<SUB>2</SUB>O<img style="vertical-align:sub;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> sub 對齊的圖像。
</p> 
<p>
這是一幅H<SUB>2</SUB>O<img style="vertical-align:super;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> super 對齊的圖像。
</p>
<p>
這是一幅H<SUB>2</SUB>O<img style="vertical-align:top;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> top 對齊的圖像。
</p>
<p>
這是一幅H<SUB>2</SUB>O<img style="vertical-align:text-top;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> text-top 對齊的圖像。
</p> 
<p>
這是一幅H<SUB>2</SUB>O<img style="vertical-align:middle;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> middle對齊的圖像。
</p>
<p>
這是一幅H<SUB>2</SUB>O<img style="vertical-align:bottom;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> bottom 對齊的圖像。
</p>
<p>
這是一幅H<SUB>2</SUB>O<img style="vertical-align:text-bottom;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> text-bottom 對齊的圖像。
</p>
<p>
這是一幅H<SUB>2</SUB>O<img style="vertical-align:24px;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> 24px 對齊的圖像。
</p>
<p>
這是一幅H<SUB>2</SUB>O<img style="vertical-align:0px;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> 0px 對齊的圖像。
</p>
<p>
這是一幅H<SUB>2</SUB>O<img style="vertical-align:-50px;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> -50px 對齊的圖像。
</p>
<p>
這是一幅H<SUB>2</SUB>O<img style="vertical-align:20%;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> 20% 對齊的圖像。
</p>

小結

CSS 定位和浮動是HTML佈局中的重要部分，須要認真參透。注意掌握定位的幾種類型及區別，理解浮動的排列及清除，掌握與定位相關的一些屬性。

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

參考資料

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

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

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