課程目標
- 掌握定位的幾種方式
- 掌握浮動的原理及應用
- 理解文檔流的概念
- 使用定位、浮動實現常見布局
學習建議
定位、浮動是 CSS 核心知識點
課程任務
1. 文檔流的概念是什么？有哪些方式可以讓元素脫離文檔流？
文檔流（normal flow），指語言文本從左到右，從上到下顯示，這是傳統 HTML 文檔的文本布局。
浮動（float）、絕對定位（absolute）、固定定位（fixed）這 3 種定位方式會讓元素脫離文檔流。
文檔流是相對于盒子模型講的。
文本流是相對于文子段落講的。
元素浮動之后，會讓它跳出文檔流，也就是說當它后面還有元素時，其他元素會無視它所占據了的區域，直接在它身下布局。但是文字卻會認同浮動元素所占據的區域，圍繞它布局，也就是沒有拖出文本。
但是絕對定位后，不僅元素盒子會拖出文檔流，文字也會出文本流。那么后面元素的文本就不會在認同它的區域位置，會直接在它后面布局，不會在環繞。
當然你可以使用 index-z 來讓底部的元素到上面來，類似于一個圖層的概念。
拓展閱讀：
2. 有幾種定位方式，分別是如何實現定位的，使用場景如何？
定位
CSS 定位 (Positioning) 屬性允許你對元素進行定位。定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素，另一個元素甚至瀏覽器窗口本身的位置。
CSS 有 3 種基本的定位機制：普通流（文檔流）、浮動和絕對定位。
static，默認值。沒有定位，元素出現在正常的流中。（忽略 top, bottom, left, right 或者 z-index 聲明）。
relative 生成相對定位的元素，相對于其本來正常位置進行定位。且沒有脫離文檔流
fixed 是相對于瀏覽器窗口定位，即使窗口滾動，它也不會移動。且脫離文檔流(因此，不占據空間。)
absolute 絕對定位的元素的位置相對于 最近的已定位父元素 (即已用 relative、absolute 或者 fixed 定位過的)，如果元素沒有已定位的父元素，那么它的位置相對于<html>。且讓元素脫離文檔流。
tips：
- 默認 z-index 是 0，所以如果設置 z-index 為負值，就會在“整個”的下面。
- 浮動和絕對定位可以讓元素脫離文檔流。
- 所以元素如果沒有設置 position: relative, absolute, 或者 fixed。那么設置的 top, bottom, left, right, z-index 都是沒有用的。
- 相對定位元素 (relative) ，經常被用來作為絕對定位元素（absolute）的容器塊。
3. absulute，relative，fixed 偏移的參考點分別是什么？
absolute 的參考點是最近已定位的父元素或者根節點。
relative 的參考點是其本來的原位置。
fixed 的參考點是瀏覽器窗口。
4. z-index 有什么作用？如何使用？
z-index 指定一個元素的堆疊順序。數值大的元素處于數值小的元素上面（可以為負數）。數值越大，離你越近。
注意： z-index 進行定位元素(position:absolute, position:relative, or position:fixed)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style media="screen">
img {
position: absolute;
z-index: -1;
}
</style>
</head>
<body>
<img src="goutou.jpg" alt="dog" />
<h1>測試 z-index測試 z-index測試 z-index測試 z-index</h1>
<h1>測試 z-index測試 z-index測試 z-index測試 z-index</h1>
<h1>測試 z-index測試 z-index測試 z-index測試 z-index</h1>
<h1>測試 z-index測試 z-index測試 z-index測試 z-index</h1>
<h1>測試 z-index測試 z-index測試 z-index測試 z-index</h1>
<h1>測試 z-index測試 z-index測試 z-index測試 z-index</h1>
</body>
</html>
position: absolute;使圖片脫離普通流。且z-index: -1;令圖片在文字下面(默認 z-index 為 0)。
若改為：
img {
position: absolute;
z-index: 1;
}
則圖片 z-index 大于文字默認的 z-index，令圖片在文字上面。
5. position:relative 和負 margin 都可以使元素位置發生偏移？二者有什么區別？
position: relative;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Relative 與 負margin</title>
<style media="screen">
.container {
width: 200px;
height: 200px;
border: 1px solid;
}
.box1 {
width: 50px;
height: 50px;
background-color: red;
position: relative;
top: 10px;
left: 30px;
}
.box2 {
width: 50px;
height: 50px;
background-color: blue;
}
.box3 {
width: 50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
紅色 box1 脫離本來的位置，但是原本占據的空間并沒有被其他 box 占據。
負 margin
.box2 {
width: 50px;
height: 50px;
background-color: blue;
/*margin-left: -20px;*/
/*margin-right: -200px;*/
/*margin-bottom: -30px;*/
margin-top: -30px;
}
藍色box2直接頂上去了，而且接著的綠色box3也跟著一起往上移。
拓展閱讀：
6. 如何讓一個固定寬高的元素在頁面上垂直水平居中？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何讓一個固定寬高的元素在頁面上垂直水平居中</title>
<style media="screen">
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
思路：絕對定位，left: 50%; + top: 50%;（這是，只是左上角的點居中了）再加上 margin-left: -50px; + margin-top: -50px; （移動半邊長的距離，令 div 的“中心”移動到外面父元素的“中心”）。
7. 浮動元素有什么特征？對其他浮動元素、普通元素、文字分別有什么影響？
浮動，浮動的框可以向左或者向右移動，直到它的外邊緣碰到包含框或者另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以，文檔的普通流中的塊框表現得就像浮動框不存在一樣。
特征：
- 內聯元素支持寬高
- 無論是塊元素還是內聯元素，沒有寬度時默認內容撐開寬度
- 脫離文檔流
對其他浮動元素的影響：
后浮動的元素永遠不會超過先浮動的元素
對普通元素的影響：
浮動元素會脫離普通流，使得周圍的元素發生偏移
對文字的影響：
浮動元素不會影響到文字的顯示，文字會相對于浮動元素發生偏移
tips：
- 文字可以圍繞在浮動框周圍（類似于 office 的“圍繞圖片的文字”）
- 浮動只有向左或者向右，而沒有自動向上一說。
- 塊元素浮動，占據的空間就變為“行內元素”，不占據一整行。浮動元素占據的空間（如果沒有設置 width ），會按本身內容而定，就像“行內元素”一樣。absolute 也會有類似的效果
8. 清除浮動指什么？如何清除浮動？
元素在浮動之前，是在標準流的，是豎向排列的。而浮動之后，可以理解為橫向排列。
清除浮動可以理解為打破橫向排列。
demo1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen">
.box1 {
width: 200px;
height: 100px;
background-color: red;
float: left;
clear: right;
}
.box2 {
width: 500px;
height: 300px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
.box1 用了clear: right;，但是 .box2 仍然在 .box1 的右邊。可見，并沒有清除浮動。
demo2
.box1 {
width: 200px;
height: 100px;
background-color: red;
float: left;
/*clear: right;*/
}
.box2 {
width: 500px;
height: 300px;
background-color: blue;
float: left;
clear: left;
}
.box2 用了 clear: left;，由圖可知，已清除浮動。
綜合2個 demo，得知，對于 清除浮動（clear），這個規則只能影響使用清除的元素本身，不能影響其他元素。
