1. 浮動 (float)
? ? ? ? CSS的定位機制有三種：普通流(標準流)，浮動和定位。
? ? ? ? 普通流就是一個網頁內標簽元素正常從上到下，從左到右排列順序的意思，比如塊級元素會獨占一行，行內元素會按順序依次前后排列；按照這種大前提的情況下絕對不會出現例外的情況叫普通流布局。
? ? ? ? 1.1 什么是浮動？
????????元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。??
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;/* 定義浮動left ：元素向左浮動right ： 元素向右浮動none ：不浮動 默認*/float: left;color: white;text-align: center;line-height: 200px;font-size: 50px;}.a {background-color: blue;}.b {background-color: red;}.c {background-color: green;}</style>
</head>
<body><div class="a">div1</div><div class="b">div2</div><div class="c">div3</div>
</body>
</html>? ? ? ? 頁面顯示
? ? ?1.2? 浮動特性
????????浮動脫離標準流，不占位置，會影響標準流。浮動只有左右浮動。
????????浮動首先創建包含塊的概念。就是說，浮動的元素總是找離它最近的父級元素對齊。但是不會超出內邊距的范圍。
????????
????????浮動的元素排列位置，跟上一個元素（塊級）有關系。如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；如果上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊。
? ? ? ?
????????1. 一個父盒子里面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。
????????2. 元素添加浮動后，元素會具有行內塊元素的特性。元素的大小完全取決于定義的大小或者默認的內容多少浮動根據元素書寫的位置來顯示相應的浮動。
2. 定位
? ? ?元素的定位屬性主要包括定位模式和邊偏移兩部分。
? ? ?邊偏移：
| 邊偏移屬性 | 描述 |
| top | 頂端偏移量，定義元素相對于其父元素上邊線的距離 |
| bottom | 底部偏移量，定義元素相對于其父元素下邊線的距離 |
| left | 左側偏移量，定義元素相對于其父元素左邊線的距離 |
| right | 右側偏移量，定義元素相對于其父元素右邊線的距離 |
? ? ? 定位模式：
? ? ? ? ? ? ? ? ? ? ?在CSS中，position屬性用于定義元素的定位模式，其基本格式如下：
選擇器 {position: 屬性值;}? ? ? ? ? ? ? ? ? ? ? ?position的屬性常用值：
| 值 | 描述 |
| static | 自動定位（默認定位方式） |
| relative | 相對定位，相對于其原文檔流的位置進行定位 |
| absolute | 絕對定位，相對于其上一個已經定位的父元素進行定位 |
| fixed | 固定定位，相對于瀏覽器窗口進行定位 |
? ? ? ? 2.1 靜態定位
????????????????所有元素的默認定位方式，當position屬性的取值為static時，可以將元素定位于靜態位置。 所謂靜態位置就是各個元素在HTML文檔流中默認的位置。在靜態定位下無法通過偏移屬性來改變元素的位置。
? ? ? ? 2.2 相對定位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 200px;}.bottom {background-color: blue;}.top {background-color: red;/* 設置相對定位相對定位，不脫標，占有原來的位置相對當前位置進行移動,可以使用偏移屬性改變元素位置*/position: relative;/* 距左200，向右移動200 */left: 200px;/* 距上100，向下移動100 */top: 100px;}</style>
</head>
<body><div class="top"></div><div class="bottom"></div>
</body>
</html>? ? ? ? 注意：1.相對定位可以通過偏移移動位置，但是原來所占有的位置，繼續占有。
? ? ? ? ? ? ? ? ? ?2.每次移動位時，是以自己的左上角為基點移動(相對于自己原來的位置)。
? ? ? ? 2.3 絕對定位? ? ? ?
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width= , initial-scale=1.0"><title>Document</title><style>.sup {width: 300px;height: 300px;background-color: aqua;position: relative;}.sub {width: 50px;height: 50px;background-color: blue;/* 設置絕對定位 */position: absolute;/* 基于有定位的上級標簽進行移動如果上級標簽都沒有定位，就基于瀏覽器移動絕對定位，脫標，不占有原來的位置*/left: 20px;top: 50px;}</style>
</head>
<body><div class="sup"><div class="sub"></div></div>
</body>
</html>? ? ? ? 子絕父相
? ? ? ? 子級是絕對定位的話，父級要用相對定位。因為子級是絕對定位，不會占有位置，可以放到父盒子里面的任何一個地方。父盒子布局時，需要占有位置，因此父親只能是相對定位。
2.4 固定定位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: aqua;/* 固定定位基于瀏覽器頁面移動，脫標*/position: fixed;top: 50%;right: 5px;}</style>
</head>
<body><div></div>
</body>
</html>? ? ? ? ? 注意：1.固定定位的元素跟父親沒有關系，只認瀏覽器。
? ? ? ? ? ? ? ? ? ? ?2.固定定位完全脫標，不占有位置，不隨滾動條滾動。
? ? ? ? 2.5 四種定位總結
| 定位模式 | 是否脫標占有位置 | 是否可以使用邊偏移 | 移動位置基準 |
| 靜態static | 不脫標，正常模式 | 不可以 | 正常模式 |
| 相對定位relative | 不脫標，占有位置 | 可以 | 相對自身位置移動（自戀型） |
| 絕對定位absolute | 完全脫標，不占有位置 | 可以 | 相對于定位父級移動位置（拼爹型） |
| 固定定位fixed | 完全脫標，不占有位置 | 可以 | 相對于瀏覽器移動位置（認死理型） |
? ? ? ? 2.6 定位模式轉換
? ? ? ? ? ? ? ? 跟浮動一樣，元素添加了絕對定位和固定定位之后，元素模式也會發生轉換，都轉換為行內塊元素，行內塊的寬度和高度和內容有關。因此比如行內塊元素如果添加了絕對定位和固定定位后，浮動后可以不用轉換模式，直接給高度和寬度就可以了。
