一、定位：
1、定位的理解
（1）相對定位
相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然后，可以通過設置垂直或水平位置，讓這個元素“相對於”它的起點進行移動。
如果將 top 設置為 20px，那么框將在原位置頂部下面 20 像素的地方。如果 left 設置為 30 像素，那么會在元素左邊創建 30 像素的空間，也就是將元素向右移動。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
如下圖所示：
注意，在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它框。
（2）絕對定位
絕對定位使元素的位置與文檔流無關，因此不占據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。
普通流中其它元素的布局就像絕對定位的元素不存在一樣：
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對於最初的包含塊。
對於定位的主要問題是要記住每種定位的意義。所以，現在讓我們復習一下學過的知識吧：相對定位是“相對於”元素在文檔中的初始位置，而絕對定位是“相對於”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相對於”最初的包含塊。
注釋：根據用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素。
提示：因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設置 z-index 屬性來控制這些框的堆放次序。
2、CSS 定位屬性
CSS 定位屬性允許你對元素進行定位。
（1）position
把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
屬性值：
- absolute：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
- fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
- relative:生成相對定位的元素，相對於其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
- static:默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
- inherit:規定應該從父元素繼承 position 屬性的值。
（2）top、right、bottom、left
| 屬性 | 描述 |
| top | 定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。 |
| right | 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。 |
| bottom | 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。 |
| left | 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。 |
屬性值：
- auto：默認值。通過瀏覽器計算上邊緣的位置。
- %：設置以包含元素的百分比計的上邊位置。可使用負值。
- length：使用 px、cm 等單位設置元素的上邊位置。可使用負值。
- inherit：規定應該從父元素繼承 top 屬性的值。
（3）overflow
設置當元素的內容溢出其區域時發生的事情。
屬性值：
- visible:默認值。內容不會被修剪，會呈現在元素框之外。
- hidden:內容會被修剪，並且其余內容是不可見的。
- scroll:內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
- auto:如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
- inherit:規定應該從父元素繼承 overflow 屬性的值。
（4）clip
設置元素的形狀。元素被剪入這個形狀之中，然后顯示出來。
屬性值：
- shape:設置元素的形狀。唯一合法的形狀值是：rect (top, right, bottom, left)。
- auto：默認值。不應用任何剪裁。
- inherit：規定應該從父元素繼承 clip 屬性的值。
（5）vertical-align
設置元素的垂直對齊方式。
屬性值：
- baseline:默認。元素放置在父元素的基線上。
- sub：垂直對齊文本的下標。
- super：垂直對齊文本的上標
- top：把元素的頂端與行中最高元素的頂端對齊
- text-top：把元素的頂端與父元素字體的頂端對齊
- middle：把此元素放置在父元素的中部。
- bottom：把元素的頂端與行中最低的元素的頂端對齊。
- text-bottom：把元素的底端與父元素字體的底端對齊。
- length
- %:使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
- inherit:規定應該從父元素繼承 vertical-align 屬性的值。
（6）z-index:設置元素的堆疊順序。
屬性值：
- auto:默認。堆疊順序與父元素相等。
- number:設置元素的堆疊順序。
- inherit:規定應該從父元素繼承 z-index 屬性的值。
二、浮動
1、浮動的理解
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
請看下圖，當把框 1 向右浮動時，它脫離文檔流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：
再請看下圖，當框 1 向左浮動時，它脫離文檔流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文檔流中，所以它不占據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”：
2、CSS 浮動屬性
float
屬性值：
- left：元素向左浮動。
- right：元素向右浮動。
- none：默認值。元素不浮動，並會顯示在其在文本中出現的位置。
- inherit：規定應該從父元素繼承 float 屬性的值。
實例（把圖像向右浮動）：
img
{
float:right;
}
3、來個實驗吧！
示例1：（認識float的兩種特性）
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<div>
<div style='float:left'><img src="image/1.jpg" ></div>
<div><img src="image/2.jpg" ></div>
<div><img src="image/3.jpg" ></div>
<div><img src="image/4.jpg" ></div>
</div>
</body>
</html>
截圖如是：
第一個<div>:
第二個<div>:
第一個<div>去掉'float:left':
我們對比這幾幅截圖，可以得知以下幾點：
- float具有“包裹性”。（所謂包裹性就是普通的div如果沒有設置寬度，它會撐滿整個屏幕，而如果給div增加float:left之后，它會把內容緊緊包裹起來。)【見圖(第一個<div>)與圖(第一個<div>去掉'float:left')的對比】
- float具有“破壞性”。（所謂破壞性就是設置了float屬性的元素會脫離文檔流。）【見圖(第一個<div>)與圖(第二個<div>)】
其實，如是解析仍感覺對float的“破壞性”描述的不太明白，好吧，再來個例子。看看float的本職工作。
示例2：（我生來是做文字環繞效果的！）
<!DOCTYPE html>
<html lang=“utf8”>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div>
<img src="image/1.jpg" style='float:left'>
哇咔咔，我生來是做文字文字環繞效果的！
</div>
</body>
</html>
去掉'float:left'的<img>元素：
帶有'float:left'的<img>元素：
<img>元素去掉'float:left'時的<div>元素：
<img>元素帶有'float:left'時的<div>元素：
其實 ，我一直想強調，但一直沒能說清楚的是：
