css中float屬性和position屬性詳解
CSS float 屬性
定義和用法
float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。
浮動元素會從普通文件流中脫離，但浮動元素影響的不僅是自己，它會影響周圍的元素對齊進行環繞。
註釋：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
left 元素向左浮動。
right 元素向右浮動。
none 預設值。元素不浮動，並會顯示在其在文字中出現的位置。
inherit 規定應該從父元素繼承 float 屬性的值。
包含塊：浮動元素的包含塊就是離浮動元素最近的塊級祖先元素。
首先要說明的浮動元素的第一個特性：不管一個元素是行內元素還是塊級元素，如果被設定了浮動，那浮動元素會生成一個塊級框，可以設定它的width和height，因此float常常用於製作橫向配列的選單，可以設定大小並且橫向排列。
1.浮動元素在浮動的時候，其margin不會超過包含塊的padding
這一點很簡單，浮動元素的浮動位置不能超過包含塊的內邊界。
2.如果有多個浮動元素，後面的浮動元素的margin不會超過前面浮動元素的margin
簡單說就是如果有多個浮動元素，浮動元素會按順序排下來而不會發生重疊的現象。
3.如果兩個元素一個向左浮動，一個向右浮動，左浮動元素的marginRight不會和右浮動元素的marginLeft相鄰。
（1）包含塊的寬度大於兩個浮動元素的寬度總和，
這種情況很簡單：包含塊元素的寬度足夠大，兩個元素一個向左浮動，一個向右浮動，井水不犯河水。
（2）包含塊的寬度小於兩個浮動元素的寬度總和
如果包含塊寬度不夠高，後面的浮動元素將會向下浮動，其頂端是前面浮動元素的底端。
4.浮動元素頂端不會超過包含塊的內邊界底端，如果有多個浮動元素，下一個浮動元素的頂端不會超過上一個浮動元素的底端
這條規則簡單說就是如果有多個浮動元素，後面的元素高度不會超過前面的元素，並且不會超過包含塊。
5.如果有非浮動元素和浮動元素同時存在，並且非浮動元素在前，則浮動元素不會高於非浮動元素
6.浮動元素會盡可能地向頂端對齊、向左或向右對齊
重疊問題
重疊問題是指兩個元素再同一個位置，會出現上下重疊的問題。浮動元素如果和普通文件流發生重疊會怎麼樣呢？
首先浮動元素要怎麼樣才會發生重疊呢，設定其margin-top為負數即可。
1、行內元素與浮動元素髮生重疊，其邊框，背景和內容都會顯示在浮動元素之上
2、塊級元素與浮動元素髮生重疊時，邊框和背景會顯示在浮動元素之下，內容會顯示在浮動元素之上
使用clear屬性的時候要記住：clear只對元素本身的佈局起作用。
一個塊級元素如果沒有設定height，其height是由子元素撐開的。對子元素使用了浮動之後，子元素會脫離標準文件流，也就是說，父級元素中沒有內容可以撐開其高度，這樣父級元素的height就會被忽略，這就是所謂的高度塌陷。要解決這樣的問題，我們就是要使用清除浮動。
對於非IE瀏覽器，主要有下面幾種方法：
增加額外的div
這是最簡單直接的方法，哪裡有浮動元素，就在其父級元素的內容中增加一個（作為最後一個子元素）
1 <div style="clear:both"></div>
這樣就會清除浮動元素帶來的問題。
優點：簡單直接，初學者常常使用的方法，也易於理解
缺點：增加額外的無意義標籤，不利於語義化，每次清除都要新增額外的空標籤，造成浪費
父級元素新增overflow:hidden
這個方法的關鍵在於觸發了BFC，BFC是CSS中的難點之一，我們以後專門來學習這個概念。現在只需要知道它可以清除浮動帶來的影響。
1 .clearfix{overflow:hidden;zoom:1}
優點：程式碼量少，沒有額外的標籤
缺點：如果子元素超出父元素的範圍，會造成超出的部分被隱藏
after偽元素
after表示子元素的後面，通過它可以設定一個具有clear的元素，然後將其隱藏
複製程式碼
1 clearfix:{
2 zoom:1
3 }
4 clearfix:after{
5 display:block; content:''; clear:both; height:0; visibility:hidden;
6 }
//複製程式碼
這種方法的原理和第一個方法一樣，就是生成一個元素來清除浮動，只是這個元素是“假的”。
優點：沒有額外標籤，綜合起來算是比較好的方法
缺點：稍顯複雜，但是理解其原理後也挺簡單的
推薦使用這種方法。
float的應用
文字環繞效果
float最初的應用就是文字環繞效果，這對圖文並茂的文章很有用。
橫向選單排列
佈局
float最經常使用的場景就是佈局。使用float可以很簡單的實現佈局，而且易於理解。
CSS position 屬性
定位 h2 元素：
h2
{
position:absolute;
left:100px;
top:150px;
}
說明
這個屬性定義建立元素佈局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。
absolute
設定了absolute的元素，會尋找距離最近的、並且position屬性設定成除static以外的值的父元素作為參照物，如果找不到，就以body作為參照。
設定的left、right、top、bottom，都是相對於這個參照物。
設定了absolute的元素，會脫離文件流（BTW，設定了float屬性也會）。
如果絕對定位元素只申明position:absolute，那麼其自身定位以及margin的參照物即為其最近的塊級、單元格（table cell）或者行內塊（inline-block）祖先元素的內容框。即沒有設定left、top時，left和top的預設值將使元素的位置和“原來的位置”一樣。
fixed
生成絕對定位的元素，相對於瀏覽器視窗進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative
relative值表示相對於原來的位置。什麼叫“原來的位置”呢？就是元素不設定position屬性（或者設定為static），在文件流中應該存在的位置。
然後，如果設定：left:10px，就意味著把該元素放置在距離該位置左側10px的位置，表現為原地向右移動10px。
生成相對定位的元素，相對於其正常位置進行定位。
因此，"left:20" 會向元素的 LEFT 位置新增 20 畫素。
【意思是元素實際上依然佔據文件中的原有位置，只是視覺上相對於它在文件中的原有位置移動了】
根據第一條規則，一般我們想要讓元素相對於某個父元素，那麼可以設定該元素為absolute，然後設定父元素為relative（不影響其位置）
static 預設值。
沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
inherit 規定應該從父元素繼承 position 屬性的值。
z-index屬性：
z-index，又稱為物件的層疊順序，它用一個整數來定義堆疊的層次，整數值越大，則被層疊在越上面，當然這是指同級元素間的堆疊，如果兩個物件的此屬性具有同樣的值，那麼將依據它們在HTML文件中流的順序層疊，寫在後面的將會覆蓋前面的。需要注意的是，父子關係是無法用z-index來設定上下關係的，一定是子級在上父級在下。
使用static 定位或無position定位的元素z-index屬性是無效的。