文檔流的概念指什么驮履？有哪種方式可以讓元素脫離文檔流?
即普通流渣刷。文檔流是文檔中可顯示對象在排列時所占用的位置鹦肿，將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流。內(nèi)聯(lián)元素和塊級元素各自遵循著不同的顯示方式辅柴，構(gòu)成了html的文檔箩溃，文檔的內(nèi)容被比喻為流，文檔中的元素可以隨波流,也可以脫離流碌识，漂浮在其上碾篡，如果你沒有為元素設(shè)定附加css屬性虱而，那么元素將按照它在html代碼中出現(xiàn)的順序一個挨著一地排列筏餐。
浮動和定位可以讓元素脫離文檔流。
- 浮動 float
- 固定定位 position:fixed
絕對定位 position:relative
有幾種定位方式牡拇，分別是如何實(shí)現(xiàn)定位的魁瞪，使用場景如何？
1. static(默認(rèn))
當(dāng)你沒有為一個元素(例如div)指定定位方式時惠呼，默認(rèn)為static导俘，也就是按照文檔的流式(flow)定位，將元素放到一個合適的地方剔蹋。所以在不同的分辨率下旅薄，采用流式定位能很好的自適合，取得相對較好的布局效果泣崩。
一般來說少梁，我們不需要指明當(dāng)前元素的定位方式是static——因?yàn)檫@是默認(rèn)的定位方式。除非你想覆蓋從父元素繼承來的定位系統(tǒng)矫付。
left,top屬性對static沒有效果凯沪，static是靠margin這些定位的。
2. relative(相對定位)
在static的基礎(chǔ)上买优，如果我想讓一個元素在他本來的位置做一些調(diào)整(位移)妨马，我們可以將該元素定位設(shè)置為relative挺举，同時指定相對位移(利用top,bottom,left,right)。
有一點(diǎn)需要注意的是烘跺，相對定位的元素仍然在文檔流中湘纵，仍然占據(jù)著他本來占據(jù)的位置空間——雖然他現(xiàn)在已經(jīng)不在本來的位置了。
3. absolute(絕對定位)
如果你想在一個文檔(Document)中將一個元素放至指定位置液荸，你可以使用absolute來定位瞻佛，將該元素的position設(shè)置為absolute，同時使用top,bottom,left,right來定位娇钱。
如果沒有定位父元素伤柄，位置是相對于body來進(jìn)行的。
絕對定位會使元素從文檔流中被刪除文搂，結(jié)果就是該元素原本占據(jù)的空間被其它元素所填充适刀。
4. fixed(固定定位)
我們知道absolute定位的參照物是“上一個定位過的父元素(static不算)”，那么如果我想讓一個元素定位的參照物總是整個文檔(viewport)煤蹭，怎么辦呢笔喉？
答案是使用fixed定位，fixed定位的參照物總是當(dāng)前的文檔硝皂。利用fixed定位常挚，我們很容易讓一個div定位在瀏覽器文檔的左上，右上等方位稽物。
HTML中的幾種定位方式
absolute, relative, fixed 偏移的參考點(diǎn)分別是什么奄毡？
- absolute：參考static 定位以外的第一個父元素進(jìn)行定位，會一層層往上找贝或，沒有的話將參考body進(jìn)行定位吼过。
- relative：參考其正常（原先本身）位置進(jìn)行定位。
- fixed：參考瀏覽器窗口進(jìn)行定位咪奖。
Position屬性四個值：static盗忱、fixed、absolute和relative的區(qū)別和用法
z-index 有什么作用? 如何使用?
當(dāng)網(wǎng)頁上出現(xiàn)多個由絕對定位（POSITION:absolute）或固定定位（POSITION:fixed）所產(chǎn)生的浮動層時羊赵，必然就會產(chǎn)生一個問題趟佃，就是當(dāng)這些層的位置產(chǎn)生重合時，誰在誰的上面呢昧捷？或者說誰看得見闲昭、誰看不見呢？這時候就可以通過設(shè)置z-index的值來解決料身，這個值較大的就在上面汤纸，較小的在下面。
demo
position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別?
使用position:relative設(shè)置偏移時芹血，相對定位的元素仍然在文檔流中贮泞，仍然占據(jù)著他本來占據(jù)的位置空間楞慈，不影響其他元素的布局。
使用負(fù)margin設(shè)置偏移時啃擦，元素會放棄自己原本占據(jù)的空間囊蓝，不但改變了自己的位置，還會影響其他元素的位置令蛉。
demo
如何讓一個固定寬高的元素在頁面上垂直水平居中?
使用絕對定位position:absolute使目標(biāo)元素脫離文檔流聚霜，top和left設(shè)置偏移50%，這時候目標(biāo)元素的左上角正好處于頁面正中間珠叔，再使用margin負(fù)值來設(shè)置目標(biāo)元素向左上方向偏移自身寬高的一半蝎宇，這時目標(biāo)元素會垂直水平居中顯示在頁面。
demo
浮動元素有什么特征祷安？對其他浮動元素姥芥、普通元素、文字分別有什么影響?
浮動元素有什么特征汇鞭？
- 浮動元素會脫離正常的文檔流凉唐，按照其外邊距指定的位置相對于它的上一個塊級元素（或父元素）顯示
- 浮動元素后面的塊級元素的內(nèi)容會向此浮動元素的外邊距靠齊，但是邊框和背景卻忽略浮動元素而向上一個任意非浮動元素靠齊
- 浮動元素后面的內(nèi)聯(lián)元素會向此浮動元素的外邊距靠齊
- 元素設(shè)置為浮動之后霍骄，就生成一個塊級框（css行高提出的概念）台囱，沒必要再聲明display:block，可以設(shè)置寬高
對其他浮動元素读整、普通元素簿训、文字分別有什么影響?
- 其他浮動元素：浮動元素會依次排在其之前浮動元素左邊或右邊，父元素如果放不下了會被擠到下面一行绘沉。
- 普通元素：普通元素將會占據(jù)其原來的位置煎楣，后面的浮動元素會浮在普通元素之上豺总。
- 文字：文字會環(huán)繞浮動元素顯示车伞。
demo
清除浮動指什么? 如何清除浮動?
在非IE瀏覽器（如Firefox）下，當(dāng)容器的高度為auto喻喳，且容器的內(nèi)容中有浮動（float為left或right）的元素另玖，在這種情況下，容器的高度不能自動伸長以適應(yīng)內(nèi)容的高度表伦，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象谦去。這個現(xiàn)象叫浮動溢出，為了防止這個現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理蹦哼，就叫CSS清除浮動鳄哭。
如何清除浮動？
- 方法一：使用帶clear屬性的空元素
在浮動元素后使用一個空元素如<div class="clear"></div>纲熏，并在CSS中賦予.clear{clear:both;}屬性即可清理浮動妆丘。 - 方法二：使用CSS的overflow屬性
給浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動锄俄，另外在 IE6 中還需要觸發(fā) hasLayout ，例如為父元素設(shè)置容器寬高或設(shè)置 zoom:1勺拣。
在添加overflow屬性后奶赠，浮動元素又回到了容器層，把容器高度撐起药有，達(dá)到了清理浮動的效果毅戈。 - 方法三：使用CSS的:after偽元素
結(jié)合 :after 偽元素（注意這不是偽類，而是偽元素愤惰，代表一個元素之后最近的元素）和 IEhack 苇经，可以完美兼容當(dāng)前主流的各大瀏覽器，這里的 IEhack 指的是觸發(fā) hasLayout宦言。
給浮動元素的容器添加一個clearfix的class塑陵，然后給這個class添加一個:after偽元素實(shí)現(xiàn)元素末尾添加一個看不見的塊元素（Block element）清理浮動。
demo
本教程版權(quán)歸作者和饑人谷所有蜡励，轉(zhuǎn)載須說明來源令花！
