文檔流、脫離文檔流分析

檔流是文檔中可顯示對象在排列時所占用的位置。

文檔流簡述

編輯

將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流.(自己的理解是從頭到尾按照文檔的順序，該在什么位置就在什么位置，也可以按照上面的意思理解，自上而下，自左到右的順序)

詳細說明

編輯

比如網頁的div標簽它默認占用的寬度位置是一整行，p標簽默認占用寬度也是一整行，因為div標簽和p標簽是塊狀對象。網頁中大部分對象默認是占用文檔流，也有一些對象是不占文檔流的，比如表單中隱藏域。當然我們也可以讓占用文檔流的元素轉換成不占文檔流，這就要用到CSS中屬性position來控制。看看CSS 2.0對position的定義：檢索對象的定位方式。共有5個取值。 static：默認值，無特殊（靜態）定位。對象遵循HTML定位規則。 absolute：絕對定位。將對象從文檔流中拖出，使用left，right，top，bottom等屬性相對于其最接近的一個具有定位設置的父對象進行絕對定位。如果不存在這樣的父對象，則依據body對象。而其層疊通過z-index屬性定義。當對象定位在瀏覽器窗口以外，瀏覽器因此顯示滾動條。 fixed：固定定位。對象定位遵從絕對(absolute)方式。但是要遵守一些規范。當對象定位在瀏覽器窗口以外，瀏覽器不會因此顯示滾動條，而當滾動條滾動時，對象始終固定在原來位置。 relative：相對定位。對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置。當對象定位在瀏覽器窗口以外，瀏覽器因此顯示滾動條。 inherit：繼承值，對象將繼承其父對象相應的值。

sticky粘性定位，該定位基于用戶滾動的位置。

它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下實例)。

脫離文檔流分析

先來了解一下block元素和inline元素在文檔流中的排列方式。

block元素通常被現實為獨立的一塊，獨占一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性；

inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效。inline元素的margin和padding屬性。水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等

所謂的文檔流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。

脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。

只有絕對定位absolute和浮動float才會脫離文檔流。

---部分無視和完全無視的區別？需要注意的是，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍(可以說是部分無視)。而對于使用absolute position脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。(可以說是完全無視)

[1]浮動-定義：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的普通流中，所以文檔的普通流中的浮動框之后的塊框表現得就像浮動框不存在一樣。（注意這里是塊框而不是內聯元素；浮動框只對它后面的元素造成影響）

問題1：浮動元素后跟block元素&浮動元素后跟inline元素對布局的影響

浮動的框之后的block元素元素會認為這個框不存在，但其中的文本依然會為這個元素讓出位置。浮動的框之后的inline元素，會為這個框空出位置，然后按順序排列。如下第一個例子box2是浮動框，其后跟一個塊元素；例子2是浮動框后跟一個內聯元素。

 
<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 #box1{background-color:pink;width:100px;height:100px;}
 #box2{background-color:green;width:100px;height:100px;float:left;}
 #box3{background-color:red;width:200px;height:200px;}
 </style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2 向左浮動</div>
<div id="box3">box3</div>
<!--<span id="box3">span3</span>-->
</bod

問題2：元素浮動造成的兩個div覆蓋或相互重疊如何解決。

（1）、左右結構div盒子重疊現象，一般是由于相鄰兩個DIV一個使用浮動一個沒有使用浮動。如上面的例1：相鄰的兩個盒子box2向左浮動、box3未浮動。一個使用浮動一個沒有導致DIV不是在同個“平面”上，但內容不會照成覆蓋現象，只有DIV形成覆蓋現象。

解決方法：要么都不使用浮動；要么都使用float浮動；要么對沒有使用float浮動的DIV設置margin樣式。如上面的例1中box2寬度是100，只需要對box3設置margin-left：102px就可以實現不重疊。

（2）、上下結構div盒子重疊現象

 1 <head>
 2 <meta charset="UTF-8">
 3 <title></title>
 4 <style type="text/css">
 5 *{margin:0;padding:0;}
 6 .container{border:1px solid red;width:300px;}
 7 #box1{background-color:green;float:left;width:100px;height:100px;}
 8 #box2{background-color:deeppink; float:right;width:100px;height:100px; }
 9 #box3{background-color:pink;height:40px;}
10 </style>
11 </head>
12 <body>
13 
14 <div class="container">
15 <div id="box1">box1 向左浮動</div>
16 <div id="box2">box2 向右浮動</div>
17 </div>
18 <div id="box3">box3</div>
19 </body>

例子如上：.container和box3的布局是上下結構，上圖發現box3跑到了上面，與.container產生了重疊，但文本內容沒有發生覆蓋，只有div發生覆蓋現象。這個原因是因為第一個大盒子里的子元素使用了浮動，脫離了文檔流，導致.container沒有被撐開。box3認為.container沒有高度（未被撐開），因此跑上去了。

解決方法：

1、要么給.container設置固定高度，一般情況下文字內容不確定多少就不能設置固定高度，所以一般不能設置“.container”高度(當然能確定內容多高，這種情況下“..container是可以設置一個高度即可解決覆蓋問題。

2、要么清除浮動。清除浮動后的效果如下：

2-1：使用css clear清除浮動，在.container盒子閉合前加clear樣式清除浮動。

深入理解clear屬性：

clear屬性規定元素的哪一側不允許出現浮動元素，他的語法如下：

clear語法：

clear : none | left | right | both

取值：

none : 默認值。允許兩邊都可以有浮動對象

left : 不允許左邊有浮動對象

right : 不允許右邊有浮動對象

both : 不允許有浮動對象

但是需要注意的是：clear屬性只會對自身起作用，而不會影響其他元素。如果一個元素的右側有一浮動對象，而這個元素設置了不允許右邊有浮動對象，即clear：right，則這個元素會自動下移一格，達到本元素右邊沒有浮動對象的目的。

務必記住這句話：“float是魔鬼，會影響其他相鄰元素；但是clear是小白，其只會影響自身，不會對其他相鄰元素造成影響！”

2-2：給父元素設置overflow：hidden來清除浮動。

這里我們可以這樣理解：overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成一個立方體。如果沒有明確設定包含容器高度的情況下，它要計算內容的全部高度才能確定在什么位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。

按 Ctrl+C 復制代碼

<head>

*{margin:0;padding:0;}

.container{border:1px solid red;width:300px;overflow:hidden;}

#box1{background-color:green;float:left;width:100px;height:100px;}

#box2{background-color:deeppink; float:right;width:100px;height:100px; }

#box3{background-color:pink;height:40px;}

.clear{clear:both;}

</style>

</head>

<body>

</div>

</body>

按 Ctrl+C 復制代碼

[2]定位

分別分析一下position的幾個值

（1）static 默認值，無定位，不能當作絕對定位的參照物，并且設置標簽對象的left、top等值是不起作用的的。

（2）relative 相對定位。相對定位是相對于該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有著原來的位置，即占據文檔流空間。（這里的占據文檔流指的是占據原來的位置，而不是占據相對定位后的位置。個人理解：相對定位后的元素則會疊加到新位置的上，覆蓋原先新位置上的元素，但是在新位置上不實際占據空間）如下圖所示，頭像相對定位前在box1盒子下方，頭像相對定位后，頭像原來的位置空著，但是下方的帶有文本的盒子并沒有移動上來。

這是相對定位的一個主要用法，圖文混排。

注意，標簽中設置了position:relative;屬性，不設置left，right和top，bottom的值，這些值則默認值為0。注意，即使不設置值同樣起到了相對定位作用，其子孫級別標簽使用position:absolute;時同樣會起到定位效果，position：relative的另一個主要用法：方便絕對定位元素找到參照物。

（3）絕對定位

定義：設置為絕對定位的元素框從文檔流完全刪除，并相對于最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

重點：如果父級設置了position屬性，例如position:relative;，那么子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然后Top、Right、Bottom、Left用百分比寬度表示。

總結：參照物用相對定位，子元素用絕對定位，并且保證相對定位參照物不會偏移即可。

絕對定位的層設好要參照位置的層后，就可以用TOP，LEFT這些來定位置了，如果它的上級或上上級都沒定位的話只就會根據BODY的位置來定位了,還有最后一點，絕對定位是不占位置的，它會像PS的圖層一樣單獨做一層，至于第幾層你可以通過z-index:這個屬性來設置。

另外要注意：僅使用margin屬性布局絕對定位元素的情況

此情況，margin-bottom 和margin-right的值不再對文檔流中的元素產生影響，因為該元素已經脫離了文檔流。另外，不管它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏移參照物。

圖9中，使用margin屬性布局相對定位元素。

層級關系為：

<div ——————————— position:relative;

<div—————————-沒有設置為定位元素，不是參照物

<div———————-沒有設置為定位元素，不是參照物

<div box1

<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;

<div box3

效果圖：

（4）fix定位

fixed

完全脫離文檔流，相對于瀏覽器窗口進行定位。（相對于瀏覽器窗口就是相對于html）

元素框的表現類似于將 position 設置為 absolute，不過其包含塊是視窗本身。

position：fixed 作用就是無論客觀影響有多大，他依然不受影響；

.div1{

background-color:#FF0000;

width:2000px;

height:2000px;

}

、有float屬性的元素會跑

代碼：<div id="box1"></div>

CSS：div{ width: 50px; height: 50px; }

#box1{background: blue; float: left;}

#box2{ background: red;float: left; }

#box3{background: black;float: left; }

在瀏覽器中的樣式：

從圖中可以看出，div本為塊級標簽，本應各自占一行，但是添加浮動屬性之后，都向左浮動，跑到了一排。

二、如果上一行沒有float元素，那么float元素是跑不上去的

代碼：<div id="box1"></div>

CSS：div{ width: 50px; height: 50px; }

#box1{background: blue;}

#box2{ background: red;float: left; }

#box3{background: black;float: left; }

從圖中可以看出，div1沒有floa屬性，所以div2不能浮動上去；而div2有浮動屬性，所以div3會浮動上來。

三、有float屬性的元素是脫離文檔流的，非浮動元素會忽略掉前面的浮動元素

代碼：<div id="box1"></div>

CSS：div{ width: 50px; height: 50px; }

#box1{background: blue;float:left;}

#box2{ background: red;float: left; }

#box3{background: black;width:150px;height:100px; }

在瀏覽器中的樣式：

從圖中可以看出，div1和div2浮動在文檔之上，div3忽略了div1和div2，div1和div2沒有影響div3的位置。

篇文章講了文檔流相關知識，網頁中html元素會按照標準規則排列，塊級元素從上到下，行內元素從左到右排列。如果這時想讓一個元素排到右側，怎么辦？

這時就可以使用浮動float 和定位 position ，今天主要介紹float，關于float屬性稍微有點難理解，它是把雙刃刀，會用的會做出各種很好的效果，不會用的反而問題越來越多。

float 屬性有以下幾個值：

none —— 沒有浮動（默認值）。
left —— 左浮動。
right —— 右浮動。
inherit —— 繼承父元素的float。

如下示例：

左浮動

右浮動

這里注意：右浮動是從右到左排列元素，子元素的html實際位置是按照，子元素1>子元素2>子元素3的順序，但是右浮動的顯示效果是子元素1在最右邊，依次向左，正好和元素實際位置相反。

float 浮動可歸納以下幾點：

浮動本意是什么？
使元素脫離文檔流，但不脫離文本流。
會使父元素高度塌陷。
浮動和行內元素區別。
浮動的破壞性，影響相鄰元素的布局。
如何清除浮動。

浮動本意是什么？

浮動float最初設計的目的是實現文字環繞的功能，如下圖所示：

沒有使用浮動：

使用浮動后：

從上圖看到圖片脫離了文檔流浮動到左邊，但是沒有脫離文本流，文本環繞著圖片。

文字環繞效果除了float屬性能夠實現，再找不到其它方法，這就是它的真正用處，但是在早期網頁制作中，它被用來實現各種布局，比如水平的菜單，或者左邊圖片右邊文字等等效果。但是在使用float的過程中出現了各種問題，比如父元素高度塌陷，破壞相鄰元素的布局等等。

使父元素高度塌陷

當一個元素里面的子元素使用了float浮動，其父元素如果沒有設置高度或者高度小于浮動元素的高度時，父元素就會出現如下示例：

沒有使用浮動：

使用浮動后：

如上圖紅色邊框就是父元素，沒使用float前，它的高度被子元素撐開。當使用float后可以看到父元素的高度變成0了，這就是高度塌陷。

浮動和行內元素區別

float 浮動可以使一個行內元素變成塊級元素，準確地說應該更像是 inline-block 行內塊級元素，但又不完全一樣。看下如下示例：

沒有使用float前：

子元素是一個塊級元素，占滿了一行，其寬度默認為100%。

使用float后：

可以看到，子元素的寬度變了，等于其內容的實際寬度。和行內元素一樣，但是不同之處就是浮動可以使元素浮動到左側或者右側，如上圖。行內元素則不行，只能從左到右排列，這就是float的特殊之處，所以常常被用來制作一些復雜的布局效果。

浮動的破壞性

float雖然能夠解決一些布局的問題，但是用不好就會造成頁面布局混亂，出現各種奇怪的問題，如下示例：

沒有使用float前：

如上圖，所有元素從上到下排列，父級那個元素和上下相鄰。

使用float后：

此時可以看到，父級那個元素下面的相鄰元素2，由于父級元素高度塌陷，也向上移動位置，這樣導致浮動元素就會覆蓋下面的相鄰元素2，這不是我們期望的結果。

怎么解決了？要么給父級元素設置一個固定的高度，這個高度要大于浮動元素的高度，或者使用clear屬性清除浮動。

如何清除浮動

為了解決浮動造成的破壞，此時就要使用各種方法來清除浮動，常見的有以下三種方法：

1、給浮動元素父級元素使用 overflow

如下示例：

overflow:hidden;
zoom:1;

可以看到父級元素的高度不塌陷了，被子元素撐高了。由于沒有設置高度，其高度等于子元素的高度。

overflow 的缺點就是，當子元素寬度和高度超出父級時，會隱藏部分子元素內容。

在早期為了兼容ie瀏覽器，除了使用overflow：hidden；還要加上zoom：1；否則會出現一些怪異的現象。

2、使用clear屬性

clear 屬性用來是一個元素不受相鄰浮動元素的影響，它有 both （清除左右浮動），left（清除左浮動），right（清除右浮動），none （允許其相鄰元素有浮動，默認值）。

如下示例：

clear：both；

看到這里和使用overflow的效果一樣，不同之處是，要額外在父級元素中增加一個標簽來做清除浮動。這也就是它的最大缺點。

3、使用 after偽類

使用after偽類，可以不用額外增加一個多余的標簽，如下示例：

.fix:after{
    display:block; 
    content:''; 
    clear:both; 
    line-height:0; 
}

綜上所述，方法3是最后的。以上三種方法都是解決父級高度塌陷問題，還有一種情況就是給相鄰元素2設置clear 屬性，會是什么效果？

如下示例：

<div class="d2" style="clear:both;">
        相鄰元素2
  </div>

如上圖看到相鄰元素2，恢復到默認文檔流中的位置，但是發現父級元素的高度仍然塌陷，這種清除浮動的情況是比較特殊的，和之前的不一樣。

總結

float 是不是有點難懂，沒辦法浮動的初衷就不是用來布局的，被玩壞了。但是不要緊，float在如今網頁布局中已經很少使用，css3已經有了新的方案，比如flex等。所以關于本篇了解下就可以了，不需要完全掌握。

感謝閱讀，歡迎指出錯誤或者補充。

上篇：前端入門——網頁中的文檔流和布局

在線咨詢

上一篇：談談反饋設計怎么做
下一篇：你知道關閉頁面時怎么向后臺發送消息嗎？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

文檔流、脫離文檔流分析

文檔流簡述

詳細說明

脫離文檔流分析

fixed

浮動本意是什么？

使父元素高度塌陷

浮動和行內元素區別

浮動的破壞性

如何清除浮動

3、使用 after偽類

總結

您的項目需求