本教程版權(quán)歸凱旋和饑人谷所有，轉(zhuǎn)載須說明來(lái)源
一 、文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流
首先明確一點(diǎn)的是，W3C規(guī)范中沒有document flow這個(gè)概念，只有normal-flow, 文檔流的叫法主要還是多數(shù)中文譯者的翻譯方式問題。簡(jiǎn)單說就是元素按照其在 HTML 中的位置順序決定排布的過程。即是將窗體自上而下分成一行行，并在每行中按從左至右的順序排放元素并且這種過程遵循標(biāo)準(zhǔn)的描述。
position布局和float布局可以使元素脫離文檔流；
normal-flow
二 、有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，使用場(chǎng)景如何？
值 描述
inherit 規(guī)定應(yīng)該從父元素繼承 position 屬性的值。
static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
relative 生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。因此，"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。
absolute 生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
fixed 生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
浮動(dòng)
background-position
定位
定位參考
定位形式
三 、absolute, relative, fixed 偏移的參考點(diǎn)分別是什么
relative元素的定位永遠(yuǎn)是相對(duì)于元素自身位置的，和其他元素沒關(guān)系，也不會(huì)影響其他元素。
absolute位置是相對(duì)于距離他最近的非static祖先元素位置決定的，如果節(jié)點(diǎn)樹中所有父（祖）元素都沒有設(shè)置position屬性值為relative或者absolute則該元素最終將對(duì)body進(jìn)行位置偏移
fixed 設(shè)置了固定定位之后，元素相對(duì)的偏移的參考是可視窗口，即使頁(yè)面滾動(dòng)，元素仍然會(huì)在固定位置,即當(dāng)你滾動(dòng)網(wǎng)頁(yè)，其元素與瀏覽器窗口之間的距離是恒定不變的。
參考點(diǎn)
四 、z-index 有什么作用? 如何使用?
z-index屬性設(shè)置一個(gè)定位元素沿Z軸的位置，Z軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)。Z-index僅能在定位元素上奏效
默認(rèn)都是z-index：0；數(shù)值越大，層級(jí)優(yōu)先級(jí)越高。參考
參考2
五 、position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position：relative，脫離文檔流可以使元素發(fā)生偏移，但是在文檔流中，它仍然占據(jù)著原來(lái)的位置，所以其他元素的位置不會(huì)發(fā)生變化。
負(fù)margin：通過負(fù)margin進(jìn)行偏移的元素，它會(huì)放棄偏移前占據(jù)的空間，這樣它后面文檔流中的其它元素就會(huì)“流”過來(lái)填充這部分空間，所以其他元素的位置發(fā)生了變化。
簡(jiǎn)單來(lái)說：position不會(huì)對(duì)文檔流產(chǎn)生影響，他在文檔流占的位置不變
margin改變文檔流的位置，會(huì)影響后面的文檔
參考點(diǎn)
六 、如何讓一個(gè)固定寬高的元素在頁(yè)面上垂直水平居中?
div{
position:absolute;
left:50%;
top:50;
margin-left:-width的一半;
margin-top:-height的一半;
}
七 、浮動(dòng)元素有什么特征？對(duì)其他浮動(dòng)元素、普通元素、文字分別有什么影響?
float被設(shè)計(jì)出來(lái)的初衷是用于文字環(huán)繞效果，即對(duì)一個(gè)圖片使用float之后，它周圍的文字會(huì)環(huán)繞著它。后來(lái)網(wǎng)頁(yè)慢慢的發(fā)展，我們使用它來(lái)進(jìn)行排版和布局
浮動(dòng)元素不占據(jù)空間，左右移動(dòng)知道碰到包含框的邊緣或浮動(dòng)框；
float會(huì)使元素脫離文檔流，普通元素會(huì)填充其原來(lái)的位置
用float之后的元素會(huì)變?yōu)閴K元素
浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?br>
對(duì)其他浮動(dòng)元素會(huì)按照浮動(dòng)的順序并排顯示在文檔中
float
浮動(dòng)
浮動(dòng)
float是如何工作的
float深入剖析
八 、清除浮動(dòng)指什么? 如何清除浮動(dòng)?
父容器并沒有把浮動(dòng)的子元素包圍起來(lái)，俗稱塌陷，為了消除這種現(xiàn)象采取的措施。清楚浮動(dòng)也是指為了使周圍元素不受浮動(dòng)元素的影響，為浮動(dòng)元素留出空間；
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{ *zoom: 1;}
fix{zoom:1;}
.fix:after{
display:block;
content:'clear';
clear:both;
line-height:0;
visibility:hidden;
}
在浮動(dòng)的元素后面（同一層級(jí)），增加一個(gè)新標(biāo)簽，比如：<div class="clear"></div>
.clear{clean:both}
父親元素設(shè)置display:inline-block;overflow:hidden/auto
使其形成 BFC
清除浮動(dòng)。當(dāng)然這樣的話，就會(huì)增加無(wú)用的標(biāo)簽，使得html變得冗余。
清除浮動(dòng)
