以防自己忘記寫的 網上找的
positon 與 display 的相互關系
元素分為內聯元素和區塊元素兩類（當然也有其它的），在內聯元素中有個非常重要的常識，即內兩元素是不可以設置區塊元素所具有的樣式，例如:width | height。
relative : 原來是什么類型的依舊是什么類型。
absolute | fixed ： 元素就被重置為了區塊元素，例如：打算為span元素指定大小，並絕對定位
<span style=”position:absolute; width:100px; height:50px;”>span</span>這是完全正確的，
<span style=”position:absolute; display:block; width:100px; height:100px;”>span</span>，這里的display:block就是多余的了。
position 與 float 的相互關系
一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流(這是自己起的名字，呵呵)”。
但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。
position: relative和position: absolute 都可以改變元素在文檔中的位置，設置position: relative 或 position: absolute都可以讓元素激活left、top、right、bottom 和 z-index 屬性。
網頁雖然看起來是平面的二維結構，但它其實是有z軸的，z軸的大小由z-index 控制，默認情況下，所有元素都是在z-index: 0 這一層的，這就是文檔流。設置position: relative 或 position: absolute會讓元素浮起來（就像游戲中的概念-多層圖層），也就是z-index大於0，它會改變正常情況下的文檔流。不同的是position: relative 會保留自己在z-index:0 層的位置，但是它的實際位置可能因為設置了left、top、right、bottom值而偏離原來在文檔流中的位 置，但對其他仍然在z-index:0層的元素位置不會造成影響。而position: absolute會完全脫離文檔流，不再在z-index:0層保留占位符，其left、top、right、bottom 值是相對於自己最近的一個位置–設置了position: relative 或 position: absolute的祖先元素的，如果祖先元素都沒有設置position: relative 或 position: absolute，那么就相對於body元素。
除了position: relative 和 position: absolute，float也能改變文檔流，不同的是，float屬性不會讓元素“上浮”到另一個z-index層，它仍然讓元素在z-index:0 層排列，float不像position: relative 和 position: absolute那樣，它不能通過left、top、right、bottom屬性精確地控制元素的坐標，它只能通過float:left 和 float:right 來控制元素在同層里“左浮”和“右浮”。float會改變正常的文檔流排列，影響到周圍元素。
另一個有趣的現象是position: absolute 和 float會隱式地改變display類型，不論之前什么類型的元素（display:none除外），只要設置了position: absolute 或 float中任意一個，都會讓元素以display:inline-block的方式顯示：可以設置長寬，默認寬度並不占滿父元素。就算我們顯式地設置 display:inline或者display:block，也仍然無效（float在IE6 下的雙倍邊距bug就是利用添加display:inline來解決的）。值得注意的是，position: relative卻不改變display的類型。
1、position 對 float 的影響：float 可以說是定義同輩元素之間的位置關系，浮動元素相對於父元素，其位置的定義是確定不變的的：基於position:static/relative時的位置，向左側或右側靠近(一個可能的錯誤的認識是，浮動元素會向左上角或右上角浮動)，
因此，position:static 和 position:relative 與 float 的效果可以疊加，
但 position:absolute、position:fixed 這兩個定位屬性依賴於自身元素之外的參照，將使 float 的效果無法表現出來。
2、浮動元素對文本的影響：浮動概念的基礎是圖文混排，因此同輩元素的在排版時如果浮動元素與非浮動元素之間發生覆蓋，無論是誰覆蓋誰，非浮動的元素內的文字將會被擠走，如下例：
.elm{ width:100px; height:50px;background:green; border:1px solid red; }
.lf{float:left; }
float
no float，被擠走
3、浮動元素對父元素的影響：浮動元素的父元素丟失 block 高度，即使定義了高度，也無法影響其同輩浮動元素及其浮動的子元素的布局，默認情況下，如果父元素沒有定義高度，則父元素的內容會撐開父元素，達到自適應 block 高度的效果，浮動元素無法撐開其父元素的block 高度。
4、浮動元素對自身的影響：浮動元素將按 inline-block 形式布局（haslayout），即使將他設置為 display:inline;，因此，默認寬度自動擴展為100%的元素浮動之后，寬度由元素內容撐大，原來沒有高寬屬性的元素也變得可以定義高寬；如果出現重疊，浮動元素將疊加在非浮動的同輩元素之上（像是具有更大的z-index值）；
2、對於浮動，這個屬性一般不是用來做布局的（偏向於排版），但是CSS2.1好像也就這個屬性 能夠滿足一些特定需求，所有才有了浮動布局。浮動相對絕對定位好處是，它默認可以影響行內布局，通過 clear 清除浮動也可以影響 塊布局，可以與普通流建立良好的交互。 而且浮動本身是脫離普通流的，在元素的水平定位上相比於 inline-block 更加靈活多變， 而 inline-block 的水平定位則更加有序。
3、inline-block，這個屬性也不是用來布局的（偏向於排版），但是在 CSS3 普及之前，它的用處也很大。該元素的盒子在行框中進行格式化，其順序與源HTML中的順序一一對應。 同時該元素不脫離普通流，這比浮動來說有更大的優勢，它可以跟普通流自然交互，而不必要借助去其他屬性。而且相比浮動，相鄰元素間的垂直對齊方 式，inline-block 比 float 更加靈活， float 格式化時有一條規則，就是越高越好（因此常常表現為頂端對齊），而 inline-block 在行內格式化，擁有更靈活的垂直對齊方式。 應用：
如果使用了浮動，清除浮動就會成為你的副作用，而且如果你沒有良好的HTML/CSS 結構的話，清除浮動是一個很復雜的事情。
inline-block 雖然避免了清除浮動的事情，但是會有另一個副作用，即空白符問題。這個問題的解決方案也令人十分蛋疼，因為畢竟 inline-block 不是布局屬性，它僅僅是 行內級塊容器盒子。 同時，作為IFC環境中的格式化問題，垂直居中、行高等問題也有可能是一個副作用。
其實在 CSS2.1中，利用表格 table 布局也是非常強大的方法。表格布局在等高，同列等寬對齊，垂直居中對齊上面的優勢是其他方法很難媲美的。甚至於在自適應場景中，表格布局的靈活性也非常出眾。
display: inline-block; 有些時候可以替代float實現相同的效果.
position: absolute|relative; 要配合top,left等定位;舉例:
<html>
<body>
<style type=”text/css”>
div {border: 1px solid red; margin: 1px;}
div div {border: 1px solid blue;}
</style>
<div>
<div style=”float: right;”>Float 1</div>
<div style=”float: right;”>Float 2</div>
<div style=”clear: both; border: 0;”></div>
</div>
<div style=”text-align: right;”>
<div style=”display: inline-block;”>Inline Block 1</div>
<div style=”display: inline-block;”>Inline Block 2</div>
</div>
<div style=”position: relative;”>
<div style=”position: absolute; right: 0px;”>Position 1</div>
<div style=”position: absolute; right: 50px;”>Position 2</div>
</div>
</body>
</html>表現:
上面的是float, 中間的是inline-block, 下面的是position, 可以看出:
1. 當居右(右浮動)時, float是按先后順序來的, 先寫的排子右邊; 而inline-block則保持左右順序不變.
2. 在部分瀏覽器中(以上是在的firefox中), 空行或空格會影響到inline-block, 卻不會影響到float的block.
3. position只能配合left,right來定位, 如果去掉則重疊在一起; 不能借助clear等自動擴展容器.
4. 他們都有共同點, 如果包裹的是行級元素, 則寬度可以按內容寬度自適應.
使用場景:
照片牆, 選項卡, 導航條等可以使用inline-block或float, 推薦inline-block, 但需要注意瀏覽器兼容, 用float記得習慣性的使用clear.
Tip等提示, 懸浮窗, 遮罩等, 建議使用position.