脫離文件流分析

阿新 • • 發佈：2019-01-18

先來了解一下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是小白，其只會影響自身，不會對其他相鄰元素造成影響！”

例如：下圖例3 box1向右側浮動，box2不設定clear屬性時的示意圖；例4中box1向右側浮動，box2設定clear：right，表示右側不允許出現浮動元素，則box2自動下移一行。

同樣的，如果是box1向左浮動，box2和box1則會出現重疊，如例5；但如果在box2中設定clear：left；表示左側不允許出現浮動元素，則box2同樣會下移。

但是為了計算方便：一般都會增加一個空div塊，並使用clear：both來設定表示兩側都不允許有浮動元素。這樣新的空div塊會下移，達到撐開父元素的目的。

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>DIV 相互重疊</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         .clear{clear:both;}
11     </style>
12 </head>
13 <body>
14 
15 <div class="container">
16     <div id="box1">box1 向左浮動</div>
17     <div id="box2">box2 向右浮動</div>
18      <div class="clear"></div>
19 </div>
20 <div id="box3">box3</div>
21 </body>

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

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

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>DIV 相互重疊</title>
 4     <style type="text/css">
 5         *{margin:0;padding:0;}
 6         .container{border:1px solid red;width:300px;overflow:hidden;}
 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         .clear{clear:both;}
11     </style>
12 </head>
13 <body>
14 
15 <div class="container">
16     <div id="box1">box1 向左浮動</div>
17     <div id="box2">box2 向右浮動</div>
18 </div>
19 <div id="box3">box3</div>
20 </body>

[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定位

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

脫離文件流分析

脫離文件流分析

文件流、脫離文件流分析

關於浮動的半脫離文件流的理解

HTML文件流和脫離文件流

transform佈局不會脫離文件流

脫離文件流的三種方式以及清除浮動

html/css DOM脫離文件流的幾種情況

CSS之定位與脫離文件流與過渡

浮動、絕對定位脫離文件流的區別

脫離文件流的疑難混淆點兒 display:inline-block能脫離文件流嗎

完全理解float之“不完全脫離文件流”

css中脫離文件流的理解

css中脫離文件流解惑

CSS佈局之脫離文件流詳解——浮動、絕對定位脫離文件流的區別

CSS脫離文件流

VS 解決方案文件結構分析

quick-cocos2d-x教程7:程序框架內framework文件夾分析

MySQL日誌文件與分析

c#文件流上傳圖片

Python Day2 基礎操作文件流

脫離文件流分析

相關推薦