站長(zhǎng)資訊網(wǎng)本篇文章給大家?guī)砹岁P(guān)于css中浮動(dòng)布局以及文檔流的相關(guān)知識(shí)，其中包括正常文檔流以及脫離文檔流，希望對(duì)大家有幫助。
文檔流簡(jiǎn)介
什么叫“文檔流”？簡(jiǎn)單來說，就是指元素在頁(yè)面中出現(xiàn)的先后順序?？煞譃椤罢Ｎ臋n流”和“脫離文檔流”。
1、正常文檔流
正常文檔流，又稱為“普通文檔流”或“普通流”，也就是W3C標(biāo)準(zhǔn)所說的“normal flow”。正常文檔流的簡(jiǎn)單定義是：“正常文檔流，將一個(gè)頁(yè)面從上到下分為一行一行的，其中塊元素獨(dú)占一行，相鄰行內(nèi)元素在每一行中按照從左到右排列直到該行排滿?！奔矗Ｎ臋n流指的就是默認(rèn)情況下頁(yè)面元素的布局情況。
如p、p、hr都是塊元素，因此獨(dú)占一行。而span、i、img都是行內(nèi)元素，因此如果兩個(gè)行內(nèi)元素相鄰，就會(huì)位于同一行，并且從左到右排列。
2、脫離文檔流
脫離文檔流，指的是脫離正常文檔流。而想要改變正常文檔流，可以使用兩種方法：浮動(dòng)和定位。
正常文檔流效果：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>正常文檔流</title> <style> /* 定義父元素樣式 */ .father{ width: 300px; background-color: #0c6a9d; border: 1px solid silver; } /* 定義子元素樣式 */ .father p{ padding: 10px; margin: 15px; border: 2px dashed rebeccapurple; background-color: #fcd568; } </style></head><body> <p class="father"> <p>box1</p> <p>box2</p> <p>box3</p> </p></body></html>
設(shè)置浮動(dòng)后的效果：
當(dāng)我們?yōu)榈诙?、三個(gè)p元素設(shè)置左浮動(dòng)時(shí)：正常文檔流情況下，p是塊元素，會(huì)獨(dú)占一行。但是由于設(shè)置了浮動(dòng)，第二、三個(gè)p元素卻是并列一行，并且跑到父元素之外，跟正常文檔流不一樣。也就是說，設(shè)置浮動(dòng)使得元素脫離了正常文檔流。
設(shè)置定位后的效果：
當(dāng)我們?yōu)榈谌齻€(gè)p元素設(shè)置絕對(duì)定位的時(shí)候：由于設(shè)置了定位，第三個(gè)p元素跑到父元素的上面去了。也就是說，設(shè)置了定位使得元素脫離了文檔流。
浮動(dòng)
在傳統(tǒng)的印刷布局中，文本可以按照實(shí)際需要來圍繞圖片，我們一般把這種方式稱為“文本環(huán)繞”。在前端開發(fā)中，使用了浮動(dòng)的頁(yè)面元素其實(shí)就像在印刷布局里被文字包圍的圖片一樣。這樣比喻，就很好理解了。浮動(dòng)是CSS布局的最佳利器，我們可以通過浮動(dòng)來靈活地定位頁(yè)面元素，以達(dá)到布局網(wǎng)頁(yè)的目的。例如我們可以通過設(shè)置float屬性讓元素向左浮動(dòng)或者向右浮動(dòng)，以便讓周圍的元素或文本環(huán)繞著這個(gè)元素。
float屬性取值只兩2個(gè)：
我們?cè)俅斡玫缴衔牡睦樱?/p>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>正常文檔流</title> <style> /* 定義父元素樣式 */ .father{ width: 300px; background-color: #0c6a9d; border: 1px solid silver; } /* 定義子元素樣式 */ .father p{ padding: 10px; margin: 15px; border: 2px dashed rebeccapurple; background-color: #fcd568; } </style></head><body> <p class="father"> <p>box1</p> <p>box2</p> </p></body></html>
接下來我們分別為box1添加左浮動(dòng)，為box2添加右浮動(dòng)：
.son1{float: left;} .son2{float: right;}
由上述例子可見浮動(dòng)會(huì)影響周圍元素，并且還會(huì)引發(fā)很多意想不到的問題。在CSS中，我們可以使用clear屬性來清除浮動(dòng)帶來的影響。
clear屬性取值如下：
在實(shí)際開發(fā)中，我們幾乎不會(huì)使用“clear:left;”或“clear:right;”來單獨(dú)清除左浮動(dòng)或右浮動(dòng)，往往都是直截了當(dāng)?shù)厥褂谩癱lear:both;”來清除所有浮動(dòng)。在上述例子的基礎(chǔ)上我們對(duì)浮動(dòng)進(jìn)行清除：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>清除浮動(dòng)</title> <style> /* 定義父元素樣式 */ .father{ width: 300px; background-color: #0c6a9d; border: 1px solid silver; } /* 定義子元素樣式 */ .father p{ padding: 10px; margin: 15px; border: 2px dashed rebeccapurple; background-color: #fcd568; } .son1{float: left;} .son2{float: right;} .son3{clear: both; display: block;} </style></head><body> <p class="father"> <p class="son1">box1</p> <p class="son2">box2</p> <span class="son3"></span> </p></body></html>
我們一般都是在浮動(dòng)元素后面再增加一個(gè)空元素，然后為這個(gè)空元素定義clear:both;來清除浮動(dòng)。在實(shí)際開發(fā)中，使用浮動(dòng)之后如果發(fā)現(xiàn)有什么不對(duì)勁的地方，首先檢查有沒有清除浮動(dòng)。事實(shí)上，清除浮動(dòng)不僅僅只有clear:both;，還有overflow:hidden，以及更為常用的偽元素。
（學(xué)習(xí)視頻分享：css視頻教程）
