浮動和定位
浮動
什么是浮動？
元素的浮動是指設置了浮動屬性的元素會脫離標准普通流的控制，移動到其父元素中指定位置的過程。它可以讓任何盒子可以在一行排列，用浮動來布局。
在css中，通過float屬性來定義浮動，其基本語法格式如下：
選擇器{float:屬性值;}
| 屬性值 | 描述 |
|---|---|
| left | 元素向左浮動 |
| right | 元素向右浮動 |
| none | 元素不浮動（默認值） |
浮動的特性
脫離標准流，不占位置，浮動只有左右浮動
一般只要一浮動就創建一個包含塊級的概念，一般要在外邊添加一個父盒子，然后對齊，但是不會超過其內邊距
如果上一個元素浮動則會與其在頂部對齊，如果上一個元素是標准流則上下排列
目的：為了讓多個塊級元素可以在一行顯示
清除浮動
為什么要清除浮動？
由於浮動元素不占魚原文檔流的位置，所以它會對后面的元素排版產生影響，為了解決這些問題，此時就要在該元素中清除浮動
准確來說，不是清除浮動而是清除浮動后造成的影響
其清除浮動的本質
清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題
父盒子沒有給高度就不會撐開盒子
辦法：
一、在css中，clear屬性用於清除浮動，其語法格式為：
選擇器{clear:屬性值;}
| 屬性值 | 描述 |
|---|---|
| left | 不允許左側有浮動元素（清除左側浮動的影響） |
| right | 不允許右側有浮動元素（清除右側浮動的影響） |
| both | 同時清除左右兩側浮動的影響 |
二、添加額外標簽
是W3C推薦的做法是通過在浮動元素末尾添加一個空的標簽例如 <div style="clear:both"></div>，或則其他標簽br等亦可。
添加許多無意義的標簽，結構化較差，不建議
三、父級添加overflow屬性方法
通過觸發BFC的方式，可以實現清除浮動的效果
給父級添加： overflow為 hidden|auto|scroll 都可以實現
優點： 代碼簡潔
⭐️缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。
下面兩種不太清楚
四、使用after偽元素清除浮動
:after 方式為空元素的升級版，好處是不用單獨加標簽了
使用方法：
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 專有 */
優點： 符合閉合浮動思想 結構語義化正確
缺點： 由於IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
代表網站： 百度、淘寶網、網易等
注意： content:"." 里面盡量跟一個小點，或者其他，盡量不要為空，否則再firefox 7.0前的版本會有生成空格。
五、使用before和after雙偽元素清除浮動
使用方法：
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 這句話可以出發BFC BFC可以清除浮動,BFC我們后面講 */
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
優點： 代碼更簡潔
缺點： 由於IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
代表網站： 小米、騰訊等
定位
元素的定位屬性主要包括定位模式和邊偏移兩個部分
邊偏移
| 邊偏移屬性 | 描述 |
|---|---|
| top | 頂端偏移量，定義元素相對於其父元素上邊線的距離 |
| bottom | 底部偏移量，定義元素相對於其父元素下邊線的距離 |
| left | 左側偏移量，定義元素相對於其父元素左邊線的距離 |
| right | 右側偏移量，定義元素相對於其父元素右邊線的距離 |
也就是說以后邊偏移和定位模式要搭配用，比如 top: 100px; left: 30px; 等等
定位模式
在CSS中，position屬性用於定義元素的定位模式，其基本語法格式如下：
選擇器{position:屬性值;}
position屬性的常用值
| 值 | 描述 |
|---|---|
| static | 自動定位（默認定位方式） |
| relative | 相對定位，相對於其原文檔流的位置進行定位 |
| absolute | 絕對定位，相對於其上一個已經定位的父元素進行定位 |
| fixed | 固定定位，相對於瀏覽器窗口進行定位 |
這里展開了解其模式
相對定位relative：
相對定位是將元素相對於標准流的位置進行定位，當position屬性的取值為relative時，可以將元素定位在相對位置
雖然可以改變其位置，但是它在文檔流的位置依舊保留
注意：
- 相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所占的位置，繼續占有。
- 其次，每次移動的位置，是以自己的左上角為基點移動（相對於自己來移動位置）
如果說浮動的主要目的是 讓多個塊級元素一行顯示，那么定位的主要價值就是 移動位置， 讓盒子到我們想要的位置上去。
絕對定位absolute
絕對定位通過邊偏移實現，它是完全脫標，完全不占有位置/
一、若父級元素一個都沒有定位則以瀏覽器為准對齊
二、絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。
子絕父相
這是我們學習定位的口訣，時刻記住
如下結論：
1、因為子級是絕對定位，不會占有位置， 可以放到父盒子里面的任何一個地方。
2、父盒子布局時，需要占有位置，因此父親只能是 相對定位.
這就是子絕父相的由來。
絕對定位的盒子居中（水平/垂直）
1、首先left：50%； 父盒子的一半大小
2、然后自己外邊距負的一半值就可以margin-left
固定定位fixed
當對元素設置固定定位后，它將脫離標准文檔流的控制，始終依據瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置
IE6等以下版本瀏覽器不支持固定定位
疊放次序z-index
比如：z-index：2；
注意：
- z-index的默認屬性值是0，取值越大，定位元素在層疊元素中越居上。
- 如果取值相同，則根據書寫順序，后來居上。
- 后面數字一定不能加單位。
- 只有相對定位，絕對定位，固定定位有此屬性，其余標准流，浮動，靜態定位都無此屬性，亦不可指定此屬性。
定位模式轉換
跟 浮動一樣， 元素添加了 絕對定位和固定定位之后， 元素模式也會發生轉換， 都轉換為 行內塊模式，
因此 比如 行內元素 如果添加了 絕對定位或者 固定定位后 浮動后，可以不用轉換模式，直接給高度和寬度就可以了