1.1浮動
浮動
是指設定了浮動屬性的元素會脫離標準標準流的控制，移動到其父元素中指定位置的過程。它可以讓任何盒子可以在一行排列，目的用來布局。
在css中，通過float屬性來定義浮動，其基本語法格式如下：
float:none/left/right屬性值描述
left
元素向左浮動
right
元素向右浮動
none
元素不浮動（預設值）
浮動特性
浮動時的脫離標準流，空出之前位置，會影響後面元素布局，浮動只有左右浮動，並成為類似行內塊的元素
目的：為了讓多個塊級元素可以在一行顯示
清除浮動
為什麼要清除浮動？
由於浮動元素不占原文件流的位置，所以它會對後面的元素排版產生影響，為了解決這些問題，此時就要在該元素中清除浮動，準確來說，不是清除浮動而是清除浮動後造成的影響
清除方式
1、新增額外標籤
是w3c推薦的做法是通過在浮動元素末尾新增乙個空的標籤例如
，或則其他標籤br等亦可。
新增許多無意義的標籤，結構化較差，不建議
2、父級新增overflow屬性方法
通過觸發bfc的方式，可以實現清除浮動的效果
給父級新增：overflow為 hidden|auto|scroll都可以實現
優點： **簡潔
缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素。
3、使用after偽元素清除浮動
:after 方式為空元素的公升級版，好處是不用單獨加標籤了
使用方法：
.clearfix:after 缺點： 由於ie6-7不支援:after，使用 zoom:1觸發 haslayout。
注意： content:"." 裡面盡量跟乙個小點，或者其他，盡量不要為空，否則再firefox 7.0前的版本會有生成空格。
4、使用before和after雙偽元素清除浮動
使用方法：
.clearfix:before,.clearfix:after
.clearfix:after
.clearfix
缺點： 由於ie6-7不支援:after，使用 zoom:1觸發 haslayout。
1.2定位
其基本語法格式如下：
選擇器position屬性的常用值值描述
static
自動定位（預設定位方式）
relative
相對定位，相對於其原文件流的位置進行定位
absolute
絕對定位，相對於其上乙個已經定位的父元素進行定位
fixed
固定定位，相對於瀏覽器視窗進行定位
相對定位：relative：
相對定位是將元素相對於標準流的位置進行定位，當position屬性的取值為relative時，可以將元素定位在相對位置
注意：雖然可以改變其位置，但是它在文件流的位置依舊保留，並未完全脫標準離文件流
相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所佔的位置，繼續占有。
其次，每次移動的位置，是以自己的左上角為基點移動（相對於自己來移動位置）
如果說浮動的主要目的是 讓多個塊級元素一行顯示，那麼定位的主要價值就是 移動位置
絕對定位：absolute
絕對定位通過邊偏移實現，它是脫離標準文件流的控制，影響布局
1、若父級元素乙個都沒有定位則以瀏覽器為準對齊
2、絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。
子絕父相
這是我們學習定位的口訣，時刻記住
如下結論：
1、因為子級是絕對定位，不會占有位置， 可以放到父盒子裡面的任何乙個地方。
2、父盒子布局時，需要占有位置，因此父親只能是 相對定位.
這就是子絕父相的由來。
固定定位：fixed
當對元素設定固定定位後，它將脫離標準文件流的控制，始終依據瀏覽器視窗來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器視窗的大小如何變化，該元素都會始終顯示在瀏覽器視窗的固定位置
ie6等以下版本瀏覽器不支援固定定位
疊放次序z-index
比如：z-index：2；
注意：z-index的預設屬性值是0，取值越大，定位元素在層疊元素中越居上。
如果取值相同，則根據書寫順序，後來居上。
後面數字一定不能加單位。
只有相對定位，絕對定位，固定定位有此屬性，其餘標準流，浮動，靜態定位都無此屬性，亦不可指定此屬性。
注意：定位模式轉換
跟浮動一樣， 元素新增了絕對定位和固定定位之後， 元素模式也會發生轉換， 都轉換為行內塊模式，因此 比如 行內元素 如果新增了 絕對定位或者 固定定位後 浮動後，可以不用轉換模式，直接給高度和寬度就可以了
CSS浮動與定位
浮動 如果希望塊元素在頁面中水平排列，使用float浮動元素，脫離文件流 可選值 none 預設，元素在文件流中排列 left 元素脫離文件流，向頁面左側浮動 right 元素脫離文件流，向頁面右側浮動 元素浮動後，下邊的元素會立即向上移動 a浮動後，b會直接頂到上面 元素浮動後不會超出父元素邊框和...
CSS浮動與定位
css浮動 clear 向哪邊浮動，清除哪邊 clear left 在左側不允許浮動元素。clear right 在右側不允許浮動元素。clear both 在左右兩側均不允許浮動元素 clear none 預設值。允許浮動元素出現在兩側。clear inherit 規定應該從父元素繼承 clear...
CSS 定位與浮動
css 定位 static 元素框正常生成。塊級元素生成乙個矩形框，作為文件流的一部分，行內元素則會建立乙個或多個行框，置於其父元素中。相對定位 relative 與最近的乙個元素進行定位。相對於原始的位置進行移動 注意，在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導...