1.浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
浮動元素不在文檔的普通流中，它可以根據float屬性值而左右移動，直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣才停止移動。
- 對父容器的影響：如果父容器的子元素都是浮動元素，那么父容器會失去高度，在浮動元素之外。視覺上，父容器沒有包含住浮動的子元素。
- 其它浮動元素的影響：如果包含塊太窄無法容納水平排列的全部浮動元素，那么其它浮動元素會向下移動，直到有足夠的空間，而如果浮動元素的高度不同，那么向下移動的時候可能會被卡住。
- 普通元素的影響：普通元素會視浮動元素不見，占據浮動元素原有的位置，但會被浮動元素遮罩。
- 對文字的影響：文字會感知到浮動元素的存在，會留出空間，形成環繞效果。
2.清除浮動指什么? 如何清除浮動? 兩種以上方法.
1.清除浮動指清除掉元素float屬性。
1）添加額外標簽
通過在浮動元素末尾添加一個空的標簽，例如 <div style=”clear:both”></div>。
優點：比空標簽方式語義稍強，代碼量較少 。
缺點：同樣有違結構與表現的分離，不推薦使用 。
2 )利用BFC來清除浮動。
因為BFC可以包含浮動，因此可以讓父元素生成一個新的BFC從而包圍浮動的子元素。
可以對父元素設定以下樣式之一生成新BFC。
- float: left | right;
- overflow: hidden | auto | scroll;
- display: table-cell | table-caption | inline-block;
- position: absolute | fixed;
3）使用:after 偽元素
.clearfix:after {content:""; display:block; clear:both; }
.clearfix { *zoom:1; }
由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
優點：結構和語義化完全正確,代碼量居中
缺點：復用方式不當會造成代碼量增加
3.有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？
有6種定位方式：
- inherit：從父元素繼承；
- static：默認值，沒有定位，元素出現在正常的文檔流中。參考點是文檔流中的位置。
- relative：相對定位。相對于元素本身正常位置進行定位，通過top、bottom、left、right屬性來設置偏移量。使用場景：為絕對定位設定參照物或對元素自身位置進行局部調整。
- absolute：絕對定位。相對于static定位意外的第一個祖先元素進行定位，若都沒有發現則以html標簽為參考進行定位。使用場景：當想讓元素參照特定參照物進行定位時使用。
- fixed：固定定位。生成絕對定位元素，相對于viewport進行定位。
- sticky：對象在常態時遵循普通流。它就像是relative和fixed的合體，當在屏幕中時按常規流排版，當卷動到屏幕外時則表現如fixed。
4.z-index 有什么作用? 如何使用?
當你定義的CSS中有position屬性值為absolute、relative或fixed，用z-index此取值方可生效。此屬性參數值越大，則被層疊在最上面。
5. position:relative和負margin都可以使元素位置發生偏移?二者有什么區別?
position:relative;只相對自己原本位置發生偏移，不影響其它普通流中元素的位置。
負margin：除了讓元素自身發生偏移還影響其它普通流中的元素。
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明。
- BFC就是 Block formatting contexts （塊級格式化上下文）。
- 如何生成BFC呢？
- float 除了none以外的值
- overflow 除了visible 以外的值（hidden，auto，scroll ）
- display (table-cell，table-caption，inline-block)
- position（absolute，fixed）
- BFC作用：
1)塊級格式化上下文會阻止外邊距疊加
當兩個相鄰的塊框在同一個塊級格式化上下文中時，它們之間垂直方向的外邊距會發生疊加。換句話說，如果這兩個相鄰的塊框不屬于同一個塊級格式化上下文，那么它們的外邊距就不會疊加。
2)塊級格式化上下文不會重疊浮動元素
根據規定，一個塊級格式化上下文的邊框不能和它里面的元素的外邊距重疊。這就意味著瀏覽器將會給塊級格式化上下文創建隱式的外邊距來阻止它和浮動元素的外邊距疊加。由于這個原因，當給一個挨著浮動的塊級格式化上下文添加負的外邊距時將會不起作用（Webkit和IE6在這點上有一個問題——可以看這個測試用例）。
3)塊級格式化上下文通常可以包含浮動
詳見： W3C CSS2.1 - 10.6.7 'Auto' heights for block formatting context roots
通俗地來說：創建了 BFC的元素就是一個獨立的盒子，里面的子元素不會在布局上影響外面的元素，反之亦然，同時BFC任然屬于文檔中的普通流。
7.在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例。
外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
（1）兩個兄弟元素在垂直方向上合并外邊距，取較大值進行合并。
代碼1
這時兩個div在垂直距離上的外邊距進行了合并，合并后的值是20px。
（2）父子元素間沒有阻擋（如：邊框、非空內容、padding等）時發生上和/或下外邊距合并。
代碼2
這時就會發生合并。合并后的外邊距是30px。
（3）外邊距自己和自己合并
如果一個元素沒有邊框和填充內容，但有上下外邊距，這時它的上下外邊距會合并
代碼3
這時上下外邊距合并成50px。
除此之外，若該元素垂直方向上的兄弟元素也有外邊距，那么垂直方向的外邊距依舊會發生合并。
代碼4
此時，外邊距合并成80px。
3.阻止嵌套元素的外邊距合并形成BFC可以阻止外邊柜合并或者元素上加上border或者padding。
