文檔流概述

正常文檔流

“文檔流”指元素在頁面中出現的先后順序。正常文檔流，又稱為“普通文檔流”或“普通流”，也就是W3C標準所說的“normal flow”。正常文檔流，將一個頁面從上到下分為一行一行，其中塊元素獨占一行，相鄰行內元素在每一行中按照從左到右排列直到該行排滿。也就是默認情況下頁面元素的布局情況。

---

脫離文檔流

脫離文檔流，指的是脫離正常文檔流。正常文檔流就是我們沒有使用浮動或者定位去改變的默認情況下的HTML文檔結構。如果我們想要改變正常文檔流，可以使用兩種方法：浮動和定位。

---

浮動

浮動可以讓獨占一行排布的塊元素并列排布。

語法

float:取值;

屬性值	說明
left	元素向左浮動
right	元素向右浮動

---

特點：

• 當一個元素定義了 float:left 或 float:right 時，不管這個元素之前是 inline、 inline-block，還是其他類型，都會變成 block 類型。
• 當一個元素定義了 float:left 或 float:right 時，這個元素會脫離文檔流，后面的元素會緊跟著填上了空缺的位置。

---

清除浮動

浮動會影響周圍元素，并且還會引發很多預想不到的問題。在CSS中，我們可以使用clear屬性來清除浮動帶來的影響。

語法

clear:取值;

屬性值	說明
left	清除左浮動
right	清除右浮動
both	同時清除左浮動和右浮動

• 在實際開發中，幾乎不會使用“clear:left”或“clear:right”來單獨清除左浮動或右浮動，往往都是直截了當地使用“clear:both”來把所有浮動清除，既簡單又省事。
• 一般都是在浮動元素后面再增加一個空元素，然后為這個空元素定義“clear:both”來清除浮動。在實際開發中，凡是用了浮動之后發現有不對勁的地方，首先應該檢查有沒有清除浮動。

---

浮動的影響

對自身的影響	如果一個元素設置了浮動，則不管這個元素是什么類型，都會轉化為塊元素，也就是此時 display 屬性的取值為 block。并且可以設置 width、 height、padding 和 margin。
對父元素的影響	如果一個元素設置了浮動，那么它會脫離正常文檔流。如果浮動元素的 height 大于父元素的高度 height，或者父元素沒有定義高度 height，此時浮動元素會脫離父元素。這就是我們常見的 “父元素高度塌陷”。 原因在于， 父元素不能把子元素包裹起來。說白了，就是“老爸管不住兒子，因此兒子離家出走了”。
對兄弟元素的影響	1．兄弟元素是浮動元素 當一個元素是浮動元素，并且它的兄弟元素也是浮動元素時，分兩種情況來探討： 同一方向的兄弟元素。 當一個浮動元素碰到同一個方向的兄弟元素時，這些元素會從左到右、從上到下，一個接著一 個緊挨著排列。 相反方向的兄弟元素。 當一個浮動元素碰到相反方向的兄弟元素時，這兩個元素會移向兩邊（如果父元素的寬度足夠的話）
	2．兄弟元素不是浮動元素 該元素會脫離文檔流，兄弟元素如果在該元素的下方時，兄弟元素會緊跟著填上了空缺的位置。 并且該元素會覆蓋兄弟元素。
對子元素的影響	如果一個元素是浮動元素（沒有定義 height），并且它的子元素也是浮動元素,則這個浮動元素會自適應地包含該子元素。

---