1.浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
浮動元素不在文檔的普通流中，它可以根據(jù)float屬性值而左右移動，直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣才停止移動。
對父容器的影響：如果父容器的子元素都是浮動元素，那么父容器會失去高度，在浮動元素之外。視覺上，父容器沒有包含住浮動的子元素。
其它浮動元素的影響：如果包含塊太窄無法容納水平排列的全部浮動元素，那么其它浮動元素會向下移動，直到有足夠的空間，而如果浮動元素的高度不同，那么向下移動的時候可能會被卡住。
普通元素的影響：普通元素會視浮動元素不見，占據(jù)浮動元素原有的位置，但會被浮動元素遮罩。
對文字的影響：文字會感知到浮動元素的存在，會留出空間，形成環(huán)繞效果。
2. 清除浮動指什么? 如何清除浮動? 兩種以上方法
清除浮動是指結(jié)合clear屬性讓父元素在視覺上包圍浮動元素。清除浮動的方法：
（1） 在父元素的子元素最后添加一個空div，并對其設(shè)置樣式：clear:both;
由于在子元素最后添加了空div，并清除了浮動，因此父容器被撐開，實現(xiàn)了在視覺上包圍浮動元素的效果。
（2） 利用BFC來清除浮動。
因為BFC可以包含浮動，因此可以讓父元素生成一個新的BFC從而包圍浮動的子元素。
可以對父元素設(shè)定以下樣式之一生成新BFC。
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
(3)結(jié)合CSS特性的通用清除浮動方案，其本質(zhì)還是第1種方法。
.clearfix{*zoom: 1;}
.clearfix:after{content: ””; display: block; clear: both;}
3. 有幾種定位方式，分別是如何實現(xiàn)定位的，參考點是什么，使用場景是什么？
有6種定位方式：
inherit：從父元素繼承；
static：默認(rèn)值，沒有定位，元素出現(xiàn)在正常的文檔流中。參考點是文檔流中的位置。
relative：相對定位。相對于元素本身正常位置進(jìn)行定位，通過top、bottom、left、right屬性來設(shè)置偏移量。使用場景：為絕對定位設(shè)定參照物或?qū)υ刈陨砦恢眠M(jìn)行局部調(diào)整。
absolute：絕對定位。相對于static定位意外的第一個祖先元素進(jìn)行定位，若都沒有發(fā)現(xiàn)則以html標(biāo)簽為參考進(jìn)行定位。使用場景：當(dāng)想讓元素參照特定參照物進(jìn)行定位時使用。
fixed：固定定位。生成絕對定位元素，相對于viewport進(jìn)行定位。
sticky：對象在常態(tài)時遵循普通流。它就像是relative和fixed的合體，當(dāng)在屏幕中時按常規(guī)流排版，當(dāng)卷動到屏幕外時則表現(xiàn)如fixed。
4. z-index 有什么作用? 如何使用?
因為絕對定位的元素脫離了普通流，所以絕對定位的元素可以覆蓋頁面上的其它元素。這時可以通過給元素設(shè)置z-index屬性來控制疊放順序，該屬性值越高，元素位置越靠上。
5. position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative;只相對自己原本位置發(fā)生偏移，不影響其它普通流中元素的位置。
margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素。
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
BFC是塊級格式上下文。其定義是：浮動、絕對定位（絕對定位、固定定位）元素、塊級容器（如inline-block、 table-cell、table-caption）并不是塊級盒子，還包括哪些overflow屬性值取值visible以外的塊級盒子，會為它們的內(nèi)容物創(chuàng)建一個新的塊級格式化上下文。對元素設(shè)置以下屬性就可以生成BFC：
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
BFC的作用有：
（1） 解決margin重疊問題。所謂margin重疊是指處于同一個BFC的相鄰元素、嵌套元素，只要它們之間沒有阻擋（如：邊框、非空內(nèi)容、padding等）就會發(fā)生margin重疊。這是只要讓其中一個元素生成新的BFC就能解決margin重疊問題。
（2） 清除浮動。因為BFC可以包含浮動，所以讓父容器生成新的BFC可以讓父容器在視覺上包圍了浮動的子元素，因而清除了浮動。
7. 在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
（1）兩個兄弟元素在垂直方向上合并外邊距，取較大值進(jìn)行合并。
<pre>
d1 {
width:100px;
height:100px;
margin-bottom:20px;
}
d2 {
width:100px;
height:100px;
margin-top:10px;
}
<div id="d1">
</div>
<div id="d2">
</div>
</pre>
這時兩個div在垂直距離上的外邊距進(jìn)行了合并，合并后的值是20px。
（2）父子元素間沒有阻擋（如：邊框、非空內(nèi)容、padding等）時發(fā)生上和/或下外邊距合并。
例：
<pre>
<div class=”parent”>
<div class=”child”>
</div>
</div>
.parent{
width: 200px;
height: 100px;
margin-top:10px;
background-color: red;
}
.child{
width: 100px;
height: 100px;
margin-top:30px;
background-color: yellow;
}
</pre>
這時就會發(fā)生合并。合并后的外邊距是30px。
（3）外邊距自己和自己合并
如果一個元素沒有邊框和填充，但有上下外邊距，這時它的上下外邊距會合并。
例：
<pre>
d1 {
margin-top:50px;
margin-bottom:20px;
}
<div id="d1">
</div>
</pre>
這時上下外邊距合并成50px。
除此之外，若該元素垂直方向上的兄弟元素也有外邊距，那么垂直方向的外邊距依舊會發(fā)生合并。
例：
<pre>
d1 {
margin-top:50px;
margin-bottom:20px;
}
d2 {
width:100px;
height:100px;
margin-bottom: 80px;
}
<div id="d2">
</div>
<div id="d1">
</div>
</pre>
這時，外邊距合并成80px。
