HTML5+CSS3-基礎03-清除浮動&position
- 3種清除浮動方法
- Position定位
3種清除浮動方法
1. 添加新元素，使用clear:both;
這種方式優點就是代碼少，容易了解，浏覽器幾乎都支援，出現的問題比較少，但缺點就是如果頁面浮動浮動布局多的話，就要添加很多空div去清除浮動，不便優化。雖然這是常用的清除浮動方式，但不建議使用
2.父容器使用overflow: auto;
使用這種方法，必須定義width或者zoom,而且不能設定高度height，優點是代碼少，缺點是不能使用position,否則超出的元素将會被隐藏
3.父容器使用僞類:after跟zoom
這種方式是最推薦的，目前大多數大型網站都是使用這種方式清除浮動，浏覽器相容好，不會出現什麼奇怪的問題。
Position定位
1. static定位（預設）
靜态定位是所有元素的預設定位方式，當position屬性的取值為static時，可以将元素定位于靜态位置。 所謂靜态位置就是各個元素在HTML文檔流中預設的位置。
3. relative相對定位（不脫離标準流）``
相對定位是将元素相對于它在标準流中的位置進行定位，當position屬性的取值為relative時，可以将元素定位于相對位置。
注意：
1.相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所占的位置，繼續占有。
2.每次移動的位置，是以自己的左上角為基點移動（相對于自己來移動位置）中的位置進行定位
4. absolute絕對定位（脫離标準流）
當position屬性的取值為absolute時，可以将元素的定位模式設定為絕對定位。
（1）若所有父元素都沒有定位，會自動往上層尋找有定位的父元素，如果都沒有定位，則以浏覽器為準對齊(document文檔)。
（2）絕對定位是将元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。
注意：絕對定位最重要的一點是，它可以通過邊偏移移動位置，但是它完全脫标，完全不占位置。
5. fixed固定定位（完全脫标）
固定定位的元素跟父親沒有任何關系，隻認浏覽器。
固定定位完全脫标，不占有位置，不随着滾動條滾動。
固定定位一定要寫寬、高，除非有内容撐開。
ie6等低版本浏覽器不支援固定定位。
定位模式轉換
跟 浮動一樣， 元素添加了 絕對定位和固定定位之後， 元素模式也會發生轉換， 都轉換為 行内塊模式。
/浮動
/絕對定位
會自動轉化元素為固定定位
行内塊
模式。 是以 比如 行内元素 如果添加了 絕對定位或者 固定定位後
浮動後，可以不用轉換模式，直接給高度和寬度就可以了。
内容僅供學習參考，若有錯誤歡迎大家指正----WUCASE