CSS中Position、Float屬性深刻探討

　對於Position、Float咱們在平時使用上能夠說是使用頻率很是高的兩個CSS屬性，對於這兩個屬性的使用上面可能大多數人存在一些模糊與不清晰的地方。本文主要對這兩個屬性使用上的一個介紹以及兩個屬性 交叉使用上的一些探討。

　　本文主要探討點：

1. Position、Float屬性的基本使用方法
2. Position、Float屬性對元素所形成的影響
3. Position、Float屬**叉使用上面的影響
4. Position、Float屬性使用上的小技巧

　　本文結構點：

　　1.HTML佈局的基本要點

　　盒子模型

　　HTML的普通流

　　2.Position屬性

　　屬性值介紹

　　用法介紹

　　一些關於position的小知識

　　3.Float屬性

　　屬性值介紹

　　用法介紹

　　與Position之間的兼容問題

　　HTML佈局的基本要點：

　　若是要掌握、運用好Position、Float屬性必需要對HTML的兩個基本點有清晰的瞭解。

　　1.盒子模型(box model)

　　2.HTML的普通流(normal flow)

　　盒子模型

　　在HTML中元素的盒子模型分爲兩種：塊狀元素、行內元素，請注意這裏的塊狀元素(Block)和行內元素(Inline)與Display屬性中的inline、block兩個屬性值並不等同。盒子模型中的Inline、Block相似因而Display屬性的父類，例如：Display屬性中的list-item屬性值是屬於塊狀(Block)類型的。

　　咱們直觀的上看兩種盒子模型的區別

• 塊狀(Block)類型的元素能夠設置width、height屬性，而行內(Inline)類型設置無效。
• 塊狀(Block)類型的元素會獨佔一行(直觀的說就是會換行顯示，沒法與其餘元素在同一行內顯示，除非你主動修改元素的樣式)，而行內(Inline)類型的元素則都會在一行內顯示。
• 塊狀(Block)類型的元素的width默認爲100%，而行內(Inline)類型的元素則是根據自身的內容及子元素來決定寬度。

　　

　　列舉出一些你們常見的元素的分類

• 塊狀元素：P、DIV、UL、LI、DD、DT…
• 行內元素：A、IMG、SPAN、STRONG…

　　

　　HTML的普通流

　　瀏覽器在讀取HTML源代碼的時候是根據元素在代碼出現的順序讀取，最終元素的呈現方式是依據元素的盒子模型來決定的。行內元素是從左到右，塊狀元素是從上到下。(以下圖)

01	<style type="text/css">

02	div { width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }

03	strong { background: #808080; }

04	em { background: #ffd800; }

05	span { background: #b6ff00; }

06

</style>

07	<strong>strong</strong><em>em</em><span>span</span>

08	<div style="background: blue">A</div>

09	<div style="background: red">B</div>

10	<div style="background: green">C</div>

　　若是你不改變元素的默認樣式前提下，元素在HTML的普通流中會「佔用」一個位置，而「佔用」位置的大小、位置則是由元素的盒子模型來決定。所以，在後續講的Position、Float屬性是否會使元素脫離這個普通流是一個關鍵點。

　　Position屬性：

　　咱們首先來談談Position屬性，由於Position屬性可以很好的體現HTML普通流這個特徵。重點在於應用了不一樣的position值以後是否有脫離普通流和改變Display屬性這兩點。

　　Position屬性值

　　Position的屬性值共有四個static、relative、absolute、fixed。

　　Static

　　全部元素在默認的狀況下position屬性均爲static，而咱們在佈局上常常會用到的相對定位和絕對定位經常使用的屬性top、bottom、left、right在position爲static的狀況下無效。其用法爲：在改變了元素的position屬性後能夠將元素重置爲static讓其迴歸到頁面默認的普通流中。

　　Relative

　　俗稱的相對定位，重點在於對相對理解。咱們此前說過每一個元素在頁面的普通流中會有「佔用」一個位置，這個位置能夠理解爲默認位置，而相對定位就是將元素偏離元素的默認位置，但普通流中依然保持着原有的默認位置，並無脫離普通流，只是視覺上發生的偏移。

　　咱們先用塊狀元素來作個示例：

1	<style type="text/css">

2	div{ width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }

3

</style>

4	<div style="background: blue">A</div>

5	<div style="background: red; position: relative; top: 20px; left: 20px;">B</div>

6	<div style="background: green">C</div>

　　右圖中的黑色虛線部分爲元素B的默認普通流位置，而黃色線則表明元素B的相對偏移量。咱們能夠很明顯的看出在元素C依然仍是保留在原位，並無由於元素B發生了偏移而隨之變化。

　　咱們再來看看行內元素(在這裏用你們最經常使用的span來作示例)

1	<style type="text/css">

2	strong { background: #808080; }

3	em { background: #ffd800; }

4	span { background: #b6ff00; position: relative; top: 10px; left: 10px; width: 100px; }

5

</style>

6	<strong>strong</strong><em>em</em><span>span</span>

　　請注意看，在這裏我是有對span進行width屬性的賦值(爲100px)。可是咱們能夠看到span在運用了relative這個position屬性值後，依然對width屬性無效，換而言之，position: relative並無改變行內元素的Display屬性，這個概念很是重要(注意與接下來的absolute的區別)。

　　Absolute

　　俗稱的絕對定位，絕對定位是相對而言的，怎麼理解呢?應用了position: absolute的元素會循着節點樹中的父(祖)元素來肯定「根」，而後相對這個「根」元素來偏移。若是在其節點樹中全部父(祖)元素都沒有設置position屬性值爲relative或者absolute則該元素最終將對body進行位置偏移。應用了position: absolute的元素會脫離頁面中的普通流並改變Display屬性(重點)!

　　咱們先用一個默認嵌套的DIV來作示例

1	<div style="background: #fff">

2

A

3	<div style="background: #81b6ff">

4

A - 1

5	<div style="background: #b6ff00;">

6

A - 2

7

</div>

8

</div>

9

</div>

　　如今咱們對A-2這個div設置絕對定位(Top: 0, Left: 0)，而沒有對它的父元素(A、A-1)設置任何的position值

1	<div style="background: #fff">A

2	<div style="background: #81b6ff">A - 1

3	<div style="background: #b6ff00; position: absolute; top: 0; left: 0;">

4	A - 2</div></div></div>

　　能夠看到(A-2)最終是根據body來產生了位移，讓咱們對比分別設置一下父元素position。

　　從上面的圖，咱們能夠總結如下幾個結論。

　　1)塊狀元素在position(relative/static)的狀況下width爲100%，可是設置了position: absolute以後，會將width變成auto(會受到父元素的寬度影響)。

　　2)元素設置了position: absolute以後，若是沒有設置top、bottom、left、right屬性的話，瀏覽器會默認設置成auto，而auto的值則是該元素的「默認位置」。即設置position: absolute先後的offsetTop和offsetLeft屬性值不變。

　　特殊狀況：

• Firefox的話會直接將top、left設置成offsetTop和offsetLeft的值而非auto。
• IE7下的表現更相似於float，會附加到父元素的末尾。

　　一些的position小知識

　　1)應用了position: relative/absolute的元素，margin屬性仍然有效，以position:relative來舉例。若是設置了left、top、bottom、right的屬性，建議你們不要設置margin數據，由於很難精確元素的定位，儘可能減小干擾因素。

　　2)position: absolute忽略根元素的padding。

1	<div id="a" style="background: #fff; width: 200px;">A

2	<div id="b" style="background: #81b6ff; width: 150px; position: relative; padding-top: 100px;">A - 1

3	<div id="c" style="background: #b6ff00; position: absolute; left: 0; top: 0">A - 2

4

</div>

5

</div>

6

</div>

　　3)在IE6/7中設置position屬性後會致使z-index屬性失效

1	<!-- 解決方案，父元素設置一個更大的z-index值便可 -->

2	<div style="z-index: 2;">

3

a

4	<div style="position: relative; z-index: 1;">

5

b

6

</div>

7

</div>

　　4)行內元素在應用了position：absolute以後會改變display。

1	<span style="position: absolute; width: 100px; height: 100px; top: 10px; left: 10px; background: #fff;">

2	個人display屬性由inline變成了block

3

</span>

　　所以，要注意到relative是並無改變行內元素的呈現模式，而absolute是會改變行內元素的呈現模式，若是設置了absolute並不須要顯式的的將元素display改爲block。

　　5)應用了position: absolute / relative以後，會覆蓋其餘非定位元素(即position爲static的元素)，若是你不想覆蓋到其餘元素，也能夠將z-index設置成-1。

　　Fixed

　　在很長的時間裏，這個屬性值由於兼容性問題，並無獲得很是普遍的應用(IE6未實現該屬性值)。fixed和absolute有不少共同點：

　　會改變行內元素的呈現模式，使display之變動爲block。

　　會讓元素脫離普通流，不佔據空間。

　　默認會覆蓋到非定位元素上。

　　fixed與absolute最大的區別在於：absolute的」根元素「是能夠被設置的，而fixed則其」根元素「固定爲瀏覽器窗口。即當你滾動網頁，其元素與瀏覽器窗口之間的距離是恆定不變的。

　　Float屬性

　　float的屬性值有none、left、right，有幾個要點：

　　1.只有橫向浮動，並無縱向浮動。

　　2.當元素應用了float屬性後，將會脫離普通流，其容器(父)元素將得不到脫離普通流的子元素高度。

　　3.浮動元素的後一個元素會圍繞着浮動元素(典型運用是文字圍繞圖片)，與應用了position的元素相比浮動元素並不會遮蓋後一個元素。

　　4.浮動元素的前一個元素不會受到任何影響(若是你想讓兩個塊狀元素並排顯示，必須讓兩個塊狀元素都應用float)。

　　與position的兼容性問題

　　1)元素同時應用了position: relative、float、(top / left / bottom / right)屬性後，則元素先浮動到相應的位置，而後再根據(top / left / bottom / right)所設置的距離來發生偏移。

1	<div style="position:relative; float:right; left:50px; top:10px;">div</div>

　　左圖中的div是沒有設置top、left值的，而右邊則設置了50px的偏移。

　　2)元素同時應用了position: absolute及float屬性，則float失效。

1	<div style="position: absolute; right:10px; top: 10px; float: left;">

2	我是一個應用了position：absolute和float：left的DIV，不過我仍是在瀏覽器的右邊，沒有浮動到左邊。

3

</div>

　　3)第一個元素應用了position以後會覆蓋着接下來的float元素(若是兩個元素所處的位置相同)

1	<div style="position: absolute; left:10px; top: 10px;">

2	我是一個應用了position：absolute的DIV。

3

</div>

4	<div style="float:left; background: red; width: 300px; height: 150px; ">

5	我是float：left的DIV

6

</div>

1	回顧：若是你不將float的元素的position設置成relative的話，你想經過設置float元素的z-index來的達到覆蓋position:absolute是無效的。同理，float元素下面存在position: absolute的子元素，若是你不將float的元素的position設置成relative的話，absolute元素是不會定位到float元素的。

　　4)同時應用position: absolute和float: left會致使清除浮動無效(position: relative則能夠清除浮動)。

　　經常使用的清除浮動的方法有兩種：

　　1.經過在容器中添加一個標籤，設置該標籤的樣式爲 clear: both

　　2.容器設置overflow: hidden

1	<div style="background: #fff; width: 100%; overflow: hidden;">

2	<div style="float: left; position: absolute;">我是DIV</div>

3	<div style="clear: both;"></div>

4	<div></div></div>