position屬性和float屬性——對文檔流的影響

position屬性

定義和用法：
position屬性用於指定一個元素在文檔中的定位方式。
top,right,bottom,left屬性則決定了該元素的最終位置。

參數

值	描述
absolute	生成絕對定位的元素，相對於最近的非 static 祖先元素定位。當這樣的祖先元素不存在時，則相對於根級容器定位
fixed	生成絕對定位的元素，相對於瀏覽器窗口進行定位
relative	生成相對定位的元素，相對於其正常位置進行定位
static	默認值，沒有定位，元素出現在正常流中 （忽略top,bottom,left,right或者z-index聲明）
inherit	規定應該從父元素繼承的position屬性的值

文檔流

• 內聯元素默認從左到右，遇到阻礙或者寬度不夠自動換行，繼續按照從左到右的方式佈局
• 塊級元素單獨佔據一行，並按照從上到下的方式佈局

脫離文檔流

• 文檔脫離文檔流後，父元素的高度就不包括它了
• 脫離文檔流的方法：float:left; position:absolute; position:fixed;

代碼演示

基礎模板如下：

<div class="parents">
	<div class="child1">小黑</div>
	<div class="child2">小紅</div>
	<div class="child3">小綠</div>
</div>

.parents{
	border: 3px solid pink;
}
.parents>div{
	width:50px;
	height:30px;
}
.child1{
	border: 3px solid black;
	color:   black;
}
.child2{
	border: 3px solid red;
	color: red;
}
.child3{
	border: 3px solid green;
	color: green;
}

方式一：加float:left; 脫離文檔流

.child1{
	/* 讓小黑邊框細一點，才能看到小紅的邊框 */
	border: 2px solid black;
	color: black;
	/* 添加: float: left; 讓“小黑”脫離文檔流 */
	float: left;
}

由上圖可以看出：
“小黑”的樣式加上：float:left，使它脫離了文檔流；
導致父元素“小粉”的高度就不包括“小黑”的高度了（它現在的高度是“小紅”+“小綠”的高度）
可憐的“小紅”被擠到下面去了

方式二：加 position:absolute;脫離文檔流

.child1{
	/* 讓小黑邊框細一點，才能看到小紅的邊框 */
	border: 2px solid black;
	color:   black;
	/* 添加: position:absolute 讓“小黑”脫離文檔流 */
	position: absolute; 
}

由上圖可以看出：
“小黑”的樣式加上：position: absolute;，使它脫離了文檔流；
導致父元素“小粉”的高度就不包括“小黑”的高度了（它現在的高度是“小紅”+“小綠”的高度）
“小黑”覆蓋在了“小紅”的身上

方式三：加 position:fixed;脫離文檔流

.child1{
	/* 讓小黑邊框細一點，才能看到小紅的邊框 */
	border: 2px solid black;
	color: black;
	/* 添加: position: fixed; 讓“小黑”脫離文檔流 */
	position: fixed;
}

同理，如方式二的position:absolute;

脫離文檔流方式總結：

• float:left; position:absolute; position:fixed; 都可使元素脫離文檔流
• 有沒有發現float:left; 脫離的不太徹底，“浮動的小黑”影響了“小紅”，它並沒有像position:absolute; position:fixed;一樣，覆蓋在“小紅身上”
  
  浮動的目的：
  最初時，浮動只能用於圖形（某些瀏覽器還支持表的浮動），目的就是爲了允許其他內容（如文本）“圍繞”該圖像。後來，CSS才允許可以浮動任何元素；

絕對定位和浮動的區別：

• 絕對定位是將元素徹底從文檔流中刪除，並相對於其包含塊定位；
  元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在一樣，該元素也不會影響到其他元素的佈局。
• 浮動，會以某種方式將浮動元素從文檔的正常流中刪除，並把元素向左或向右浮動，不過它還是會影響佈局。
  如上圖：
  “小黑”浮動後，脫離了文檔流（“小紅”佔據了“小黑”原來的空間，看邊框顏色！）
  但是“小紅”裏的文字並沒有隨之佔據“小黑”的位置，而是環繞在浮動之後的“小黑”旁邊。
  這就是爲了避免“小黑”把“小紅”裏的文字給覆蓋了，這就是浮動的目的

相對定位relative對文檔流的影響

.child1{
	border: 3px solid black;
	color: black;
	position: relative;
	top:10px;
	left: 25px;
}

由上圖可以看出：

• 相對定位relative並沒有影響父元素的高度
  對元素進行相對定位，其父元素的真實空間位置還是原來的位置，只是肉眼看到的新位置相對於原來的位置進行移動，所佔據的真實空間是不變的。

面試到這個了啊！！！你能看到這就是賺了啊！！！不用謝~