1.文檔流是指html文檔加載解析時從上到下，從左向右，但相對於盒子模型來說，浮動后脫離文檔流，但是沒有脫離文本流。
1.1代碼
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Document</title> <style> .test01{ width: 100px;height: 100px; border:1px solid red; float: left; } </style> </head> <body> <div class="test01"></div> 倘若我是跋涉千里的夜行者，母親必是那重重夜幕里一盞溫柔的燈光，遠遠的為我亮着，輕喚我遲疑的腳步；倘若我只是自怨自艾的蹩腳演員，母親必是那熱烈的掌聲，呼喚我自信，鞭策我努力；倘若我是條嬉戲的小游魚兒，母親必是那一汪碧綠的湖水，在包容我頑皮任任性的同時，也將我的快樂漣漪般一圈圈的擴散了去。 </body> </html>
1.2效果圖
2.文本流是指html文本的顯示，是相對於文字段落來說的。
tip：但是如果設置了絕對定位，元素既會脫離文本流也會脫離文檔流。
2.1代碼
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Document</title> <style> .test01{ width: 100px;height: 100px; border:1px solid red; /*float: left;*/ position: absolute; } </style> </head> <body> <div class="test01"></div> 倘若我是跋涉千里的夜行者，母親必是那重重夜幕里一盞溫柔的燈光，遠遠的為我亮着，輕喚我遲疑的腳步；倘若我只是自怨自艾的蹩腳演員，母親必是那熱烈的掌聲，呼喚我自信，鞭策我努力；倘若我是條嬉戲的小游魚兒，母親必是那一汪碧綠的湖水，在包容我頑皮任任性的同時，也將我的快樂漣漪般一圈圈的擴散了去。 </body> </html>
2.2效果圖
