文檔流簡(jiǎn)介
文檔流是文檔中可顯示對(duì)象在排列時(shí)所占用的位置坏挠。竊以為可以把窗口看作是高度為1px网棍，寬度為顯示器寬度的行組成（所以1366x768 px就是768行組成的），可顯示的對(duì)象就像是word里面的文字，占滿一行才會(huì)占用下一行的空間仲义，當(dāng)然對(duì)象的高度普遍大于1px，所以會(huì)同時(shí)占據(jù)多個(gè)最小行剑勾。
脫離文檔流
絕對(duì)定位position：absolute;
固定定位position:fixed;
浮動(dòng)float
都會(huì)脫離文檔流埃撵，但float比較難理解，所以我們重點(diǎn)說(shuō)float,請(qǐng)看一下代碼和運(yùn)行效果：
<!DOCTYPE html>
<html>
<head>
<style>
div.container
{
width:30em;
border:1px solid;
padding:1px;
}
div.box
{
width:100px;
border:1px solid red;
float:left;
}
div.box1
{
margin-left:10px;
border:1px solid green;
}
</style>
</head>
<body>
<div class="container">
<div class="box">float脫離<br>float</div>
<div class="box1">看虽另，單以文字來(lái)說(shuō)暂刘，float并未脫離文檔流，但是box1塊級(jí)元素的位置又是說(shuō)明其脫離了文檔流</div>
</div>
</body>
</html>
下面是運(yùn)行結(jié)果捂刺，你們也可復(fù)制了代碼去自行測(cè)試：
所以這里我們把文字會(huì)認(rèn)為float元素未脫離文檔流當(dāng)作是float的特性一谣拣；但其實(shí)它是脫離了文檔流的，可以看見(jiàn)它也不能把父元素?fù)伍_(kāi)
第二段代碼叠萍，知識(shí)修改了$(".box")與$(".box1")的上下位置芝发，卻發(fā)現(xiàn)不同的效果：
<body>
<div class="container">
<div class="box1">看，單以文字來(lái)說(shuō)苛谷，float并未脫離文檔流辅鲸，但是box1塊級(jí)元素的位置又是說(shuō)明其脫離了文檔流</div>
<div class="box">float脫離<br>float</div>//這個(gè)div之前在$(".box1")的上方
</div>
</body>
下面是運(yùn)行結(jié)果，你們也可復(fù)制了代碼去自行測(cè)試：
這里可以看到float的第二個(gè)特性腹殿，對(duì)于非文字對(duì)象,它相當(dāng)于
positon:absolute;left:0;(或則是right:0;)独悴，且默認(rèn)其父元素設(shè)置了position:relative;&&默認(rèn)對(duì)在其之上的兄弟元素設(shè)置了float。
也就是說(shuō)它脫離了文檔流锣尉，但是還是在其父容器中刻炒，而position:absolute;在不為父容器設(shè)置position的情況下，是相對(duì)于window對(duì)象進(jìn)行偏移的自沧。
注意：以上兩個(gè)特性是自己閑來(lái)時(shí)總結(jié)的坟奥，并無(wú)官方文檔支持树瞭，有不對(duì)的地方請(qǐng)大家指正，謝謝爱谁。
