1.浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
- 浮動元素特征：浮動元素不在文檔的普通流中，文檔的普通流中的元素表現(xiàn)的就像浮動元素不存在一樣。
- 對父容器：如果未設定高度的父容器下都是浮動元素，則父容器失去高度。(高度塌陷)
- 對其他浮動元素：如果包含塊兒太窄無法容納水平排列的三個浮動元素，那么其它浮動塊兒向下移動，直到有足夠的空間，如果浮動元素的高度不同,那么向下移動的時候可能被卡住。
- 對普通元素：普通元素無法感知浮動元素的存在，會占據(jù)原來浮動元素的位置，但會被浮動元素遮蓋。
- 對文字：文字能夠感知浮動元素的存在，會移動以留出空間 ，在浮動元素周圍進行環(huán)繞。
2.清除浮動指什么? 如何清除浮動? 兩種以上方法
清除浮動指解決浮動父容器高度塌陷問題，減少浮動帶來的影響。
清除浮動的方法：
第一種方法：在浮動元素最后再加個空div,并用clear屬性進行清除，屬性對應有：both left right none表示框的哪邊不挨著浮動框。
缺點是增加了一個無意義的標簽。
第二種方法：用BFC清理浮動（有副作用）
float為 left|right
overflow為 hidden|auto|scroll
display為 table-cell|table-caption|inline-block
position為 absolute|fixed
第三種方法（無副作用）：
/*方法1*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
/*方法2*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
3.有幾種定位方式，分別是如何實現(xiàn)定位的，參考點是什么，使用場景是什么？
inherit：規(guī)定應該從父元素繼承 position 屬性的值
static：默認值,沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
relative：生成相對定位的元素，相對于元素本身正常位置進行定位。使用場景：為絕對定位設定參照物或對元素自身位置進行局部調整。
absolute：生成絕對定位的元素，相對于static定位以外的第一個祖先元素（offset parent）進行定位,元素的位置通過 left, top, right 以及 bottom 屬性進行規(guī)定。使用場景：當想讓元素參照特定參照物進行定位時使用。
fixed：固定定位，是絕對定位的一種，固定定位的元素也不包含在普通文檔流中，差異是固定元素的包含塊兒是視口（viewport）
4.z-index 有什么作用? 如何使用?
- z-index規(guī)定了元素在Z軸（距離用戶遠近）上的順序，值越大離用戶越近、越在上層。
- z-index僅在設置了position非static屬性的元素生效(適用于浮動元素)，且z-index的值只能在兄弟元素之間比較。
- Z-index默認值為auto, 不建立層疊上下文。設置為0則會建立層疊上下文。
5.position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position:relative只相對自己原本位置發(fā)生偏移，不影響其它普通流中元素的位置。
- margin除了讓元素自身發(fā)生偏移還影響其它普通流中的元素。
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
BFC是塊級格式化上下文(Block Formatting Context)。至少滿足下列條件之一才能形成BFC：
float屬性不為none.
position屬性不為static和relative.
display屬性為下列之一:table-cell,table-caption,inline-block,flex,或者 inline-flex.
overflow屬性不為visible.
BFC作用：
BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊。
BFC不會重疊浮動元素。 http://js.jirengu.com/ruwut/1/edit?html,css,output
BFC可以包含浮動。 http://js.jirengu.com/zoqub/1/edit?html,css,output
7.在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
按照BFC的定義, 只要同屬于一個BFC, 兩個元素才有可能發(fā)生垂直Margin的重疊, 這個包括相鄰元素, 嵌套元素,只要他們之間沒有阻擋(例如邊框,非空內(nèi)容,padding等)就會發(fā)生margin重疊
- 兩個相鄰的外邊距都是正數(shù)時，折疊結果是它們兩者之間較大的值
- 兩個相鄰的外邊距都是負數(shù)時，折疊結果是兩者絕對值的較大值
- 兩個外邊距一正一負時，折疊結果是兩者的相加的和
一、阻止相鄰元素外邊距合并的方法是給相鄰元素添加一個外殼, 是兩個相鄰元素不在同一個BFC中.
二、要阻止父子外邊距合并, 可以讓父元素形成BFC
具體參考文檔
代碼一：http://js.jirengu.com/buzeyuluto/1/edit?html,css,output
代碼二：http://js.jirengu.com/bokafenihe/2/edit?html,output
代碼三：http://js.jirengu.com/sosijapiqe/2/edit?html,css
代碼四：http://js.jirengu.com/zumuseqaki/1/edit?html,css,output
