| 文檔流（普通流） |
在文檔流中，HTML 元素會按照其在 HTML文檔中的位置順序來排布,将窗體自上而下分成一行一行,并在每行中左至右的挨次排放行内元素，遇到阻礙或者寬度不夠自動換行。而塊狀元素将獨占一行。 塊級元素和行内元素.
| 文本流 |
文本流是相對于文字段落講的。可視為一串字元由左到右、由上而下的讀取和輸出形式
| 脫離文檔流 |
脫離文檔流隻有三種情況
- 浮動（float）
- 絕對定位（position:absolute)
- 固定定位(position:fixed）
脫離文檔流并不是将它從dom樹中移除，隻是其他盒子定位的時候，當作沒看到它。其後面的元素會直接無視這個脫離了文檔流的元素，直接正常補位上去。而該元素自身也不會再受到文檔流布局的束縛。
| 浮動 |
元素浮動之後，會讓它跳出文檔流，也就是說當它後面還有元素時，其他元素會無視它沒有浮動前占據的區域，直接在它身下布局。但文字卻會認同浮動元素浮動前所占據的區域，圍繞它布局，也就是沒有脫離文本流。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo1 {
width: 200px;
height: 200px;
border: 5px solid red;
/* float: left; */
}
.demo2 {
width: 200px;
height: 100px;
border: 5px solid green;
line-height: 100px;
}
</style>
</head>
<body>
<div class="demo1">這是demo1的文本</div>
<div class="demo2">這是demo2的文本</div>
<div class="demo2">talk is cheap show your </div>
</body>
</html>
📌注釋了浮動的
（圖一）
📌開啟了浮動的
（圖二）
📌開啟了浮動的并設定demo2
width:250px
（圖三）
❓圖2文字為何會重疊？
當你
div
往上推的時候，當
div
上邊框碰到了浮動塊的下邊框時候，文本流就不會繼續上移了
❓圖3下面文字為何上移一行？
溢出部分（不與浮動塊重疊）的
div
空間，有足夠空間存放文本，就會文本流讀取，把原來在下方的文本流移動上去了一行
| 絕對定位和固定定位 |
絕對定位和固定定位，不僅會把元素盒子拖出文檔流，盒子内的文字也會拖出文本流。可以使用
z-index
來讓底部的元素到上面來，類似于一個圖層的概念。效果差不多，固定定位隻是相對于浏覽器視窗進行定位，也就是這個div固定在浏覽器視窗上了，不論我們怎麼拖動滾動條都無法改變它在浏覽器視窗的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo1{
width: 200px;
height: 200px;
border: 5px solid red;
position: absolute;
left: 0px;
top: 0px;
}
.demo2{
width: 200px;
height: 100px;
border: 5px solid green;
}
</style>
</head>
<body>
<div class="demo1">這是demo1的文本</div>
<div class="demo2">這是demo2的文本</div>
</body>
</html>
❓為什麼demo2的
div
沒有和demo1的
div
重疊呢？
因為浏覽器自帶樣式使頁面内容留白幾個像素。