文檔流是布局中一個(gè)非常重要的概念，先了解文檔流，再了解布局。
什么是文檔流：將窗體自上而下分成若干行,并在每行中按從左至右的依次排放元素,即為文檔流
在常規(guī)情況下，文檔流總是從左向右從上到下的順序依次排列。
前面的盒模型中，說到，display:block 塊元素，會在前后插入換行符。這也就導(dǎo)致了，頁面總是一行一行的排列。假如我們需要更自由的布局方式呢？這時(shí)候就需要脫離文檔流了。脫離文檔流本質(zhì)上是以獨(dú)立塊元素的形式浮動在文檔中。本身不占據(jù)文檔空間。
補(bǔ)：BFC （BLOCK FORMATTER CONTEXT ）針對塊級元素排版時(shí)，使用塊級格式化上下文。默認(rèn)情況下只有一個(gè)body。但是，當(dāng)脫離文檔流后，脫離的元素被添加了獨(dú)立的塊級格式化上下文，類似iframe一樣。獨(dú)立又共生。
以下是脫離文檔流的辦法。
-
浮動
float
在知曉display:inline-block時(shí)，最常見的菜單欄就是使用float 。
浮動元素有幾個(gè)特點(diǎn)，
- 浮動元素不占據(jù)文檔流，但是顯示方式還是按照文檔流的展示。
這里意思就是說，雖然在在本質(zhì)上，浮動元素已經(jīng)脫離文檔流了，但是在展示的時(shí)候，還是會占據(jù)文檔流的內(nèi)容空間。其實(shí)這點(diǎn)不是很好理解。
原因是，浮動元素是以行內(nèi)塊元素展示，并且不受display屬性影響【除了none】，但是文檔上又不占據(jù)父元素空間，因此會看到子元素浮動后父元素坍塌，高度為0的情況。所以，這叫文檔流上不占據(jù)空間，但是占用行內(nèi)元素空間。 - 浮動元素占據(jù)其前后行內(nèi)元素的空間
假設(shè)浮動元素的前一個(gè)元素是一個(gè)行內(nèi)元素，浮動元素就會侵占行內(nèi)的空間，盡可能的靠近父元素文檔開始的位置。如果之后的元素在寬度上滿足不了，將會被擠出父元素框，在浮動元素下方重新排列。 - 浮動后面元素可以接浮動元素
這句話就不用解釋了，因?yàn)槭切袃?nèi)元素的展示方式，因此，同一父級下依次按照浮動要求排列
既然有了這個(gè)浮動，但是父級沒了高度，更多時(shí)候我們不想失去父級的高度和樣式，因此需要讓浮動元素在文檔流上回歸。這也就有了清除浮動影響的clear屬性
clear清除浮動的影響方式有幾種 left，right，both。禁止左側(cè)繼續(xù)浮動
- 利用浮動元素后一個(gè)兄弟元素清除浮動影響。
<div style="background:red">
<div style="float:left"> left </div>
<div style="float:right">right</div>
<div style = "clear:both"></div>
</div>
原理就是，標(biāo)識當(dāng)前元素前后都不能有浮動元素，因此，遇到浮動元素將會換行，此時(shí)父元素被子元素?fù)伍_，直到滿足條件。這樣也就可以讓父元素包裹住浮動元素的高度了。
- 偽元素 ::after
實(shí)際上和子元素clear是類似操作，
創(chuàng)建一個(gè)不可見塊元素，然后清除浮動影響，因?yàn)橹挥袎K元素才可以撐開父元素。
<style>
.clear::after{
content:"";
display:inline-block;
visibility:hidden;
height:0;
width:0;
clear:both;
}
.clear {
zoom:1;
}
</style>
<div class="clear">
<div style="float:left"> left </div>
<div style="float:right">right</div>
</div>
這里有一個(gè)zoom:1，是因?yàn)镮E下清除浮動影響后，父元素并不會重新渲染，導(dǎo)致高度覆蓋不正確，使用zoom:1重新渲染，使其正確顯示。
溢出清理，overflow
無論是overflow:hidden還是overflow:auto。都有一個(gè)隱式的高度自適應(yīng)。
首先用hidden來看，因?yàn)閔idden是作用在固定高度下的，在未設(shè)置元素高度的情況下，hidden會盡可能的包裹c(diǎn)ontent，auto也是一樣。因此，盡管文檔流上脫離了，但是在布局上還是占據(jù)content空間，因此，hidden會將float占據(jù)的content內(nèi)容包裹住。所以就自行設(shè)定了高度覆蓋。
但是，此時(shí)父容器的顯示高度完全依賴浮動元素。子元素的高度只能撐開文檔高度。不太有用的方式
4.1 定義父級的height。所謂上面的清理，本質(zhì)上就是撐開父容器的高度，覆蓋浮動元素。因此如果在知道布局的情況下，可以用固定高度來設(shè)置。
4.2 設(shè)置父級為浮動。 這個(gè)方法，等于白說。雖然包裹住了子元素，但是父元素本身也浮動了。
-
絕對定位
position:absolute
相對于父元素絕對定位不如說相對于父級的position非static下的絕對定位。比如 relative，absolute
在非static模式下，元素將開啟堆疊模式(z-index)。此時(shí)，如果我們需要調(diào)整位置，則需要調(diào)整left top right bottom屬性。
-
position:fixed
相對absolute來說，fixed也是絕對定位，其定位參照是瀏覽器窗體。最常見的就是浮動菜單。不管頁面如何變化，菜單相對瀏覽器窗體位置是不變的。 同時(shí)，位置修整也是和absolute一樣。
z-index
這里稍微說一下這個(gè)屬性。當(dāng)開啟堆疊模式后，如果定位的父元素沒有設(shè)定z-index值或者auto。當(dāng)子元素的z-index為負(fù)值時(shí)，將會優(yōu)先繪制子元素。因此會出現(xiàn)子元素在父元素下面的情形。
影響層疊關(guān)系的其他因素
-
opacity當(dāng)為父級設(shè)定小于1的opacity時(shí)，將產(chǎn)生一個(gè)層疊包裹，使得父級也受到堆疊影響。 -
transforms,filters,css-regions,paged media
這里感謝 : 沒人告訴你關(guān)于z-index的一些事 ? w3cplus.com
補(bǔ)：層疊順序 stacking level
1、形成堆疊上下文環(huán)境的元素的背景與邊框
2、擁有負(fù) z-index 的子堆疊上下文元素 （負(fù)的越高越堆疊層級越低）
3、正常流式布局，非 inline-block，無 position 定位（static除外）的子元素
4、無 position 定位（static除外）的 float 浮動元素
5、正常流式布局， inline-block元素，無 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）
6、擁有 z-index:0 的子堆疊上下文元素
7、擁有正 z-index: 的子堆疊上下文元素（正的越低越堆疊層級越低）
