html的文檔流是什么?html文檔流簡介

一、文檔流簡介

1、什么是“正常文檔流”？

在學習浮動布局之前，我們先來認識一下什么叫“正常文檔流”？深入了解正常文檔流，對后續的浮動布局和定位布局是非常重要的一個前提，希望讀者一定不要錯過這一節的學習。

什么叫文檔流？簡單來說，就是元素在頁面出現的先后順序。

那什么叫“正常文檔流”呢？我們先來看一下正常文檔流的簡單定義：正常文檔流，將窗體自上而下分成一行一行，塊元素獨占一行，相鄰行內元素在每行中按從左到右地依次排列元素。

上面的HTML代碼的文檔流如下：

<div><div>
<span></span><span><span>
<p></p>
<span></span><i><i><img/>
<hr/>

說明：

因為div、p、hr都是塊元素，因此獨占一行。而span、i、img都是行內元素，因此如果兩個行內元素相鄰，就會會位于同一行，并且從左到右排列。

2、什么叫“脫離正常文檔流”？

脫離文檔流是相對正常文檔流而言的。正常文檔流就是我們沒有用CSS樣式去控制的HTML文檔結構，你寫的界面的順序就是網頁展示的順序。比如寫了5個div元素。正常文檔流就是按照依次顯示這5個div元素。由于div元素是塊元素，因此每個div元素獨占一行：

HTML代碼：

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>

上圖就是按照正常文檔流顯示的效果圖。

然后，所謂的脫離文檔流就是指它所顯示的位置和文檔代碼的順序不一致了，比如可以用CSS控制，把最后一個div元素顯示在第一個div元素的位置，如下圖：

在上圖中，在不改變HTML代碼順序的前提下，我們可以通過CSS來將id="div5"的div元素從正常文檔流“抽”出來，然后顯示在其他div元素之前。在這種情況下，id="div5"的div元素就已經“脫離正常文檔流”了。

在CSS布局中，我們可以使用浮動或者定位這兩種技術來實現“脫離正常文檔流”，從而隨心所欲地控制著頁面的布局。

以上就是對html的文檔流是什么?html文檔流簡介的全部介紹，如果您想了解更多有關Html5教程，請關注PHP中文網。

以上就是html的文檔流是什么?html文檔流簡介的詳細內容，更多請關注php中文網其它相關文章！