1、浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
2、清除浮動指什么? 如何清除浮動? 兩種以上方法
3、有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？
4、z-index 有什么作用? 如何使用?
5、position:relative和負margin都可以使元素位置發生偏移?二者有什么區別
6、BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
7、在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
8、代碼
答案
1、
浮動模型也是一種可視化格式模型，浮動的框可以左右移動（根據float屬性值而定），直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣。浮動元素不在文檔的普通流中，文檔的普通流中的元素表現的就像浮動元素不存在一樣.
對父容器的影響：如果父容器的子元素都是浮動元素，那么父容器會失去高度，在浮動元素之外。視覺上，父容器沒有包含住浮動的子元素。
其它浮動元素的影響：如果包含塊太窄無法容納水平排列的全部浮動元素，那么其它浮動元素會向下移動，直到有足夠的空間，而如果浮動元素的高度不同，那么向下移動的時候可能會被卡住。
普通元素的影響：普通元素會視浮動元素不見，占據浮動元素原有的位置，但會被浮動元素遮罩。
對文字的影響：文字會感知到浮動元素的存在，會留出空間，形成環繞效果。
2、
清除浮動是指結合clear屬性讓父元素在視覺上包圍浮動元素。清除浮動的方法：
（1） 在父元素的子元素最后添加一個空div，并對其設置樣式：clear:both;
由于在子元素最后添加了空div，并清除了浮動，因此父容器被撐開。
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
<div style="clear:both;"></div>
</div>/
（2）利用BFC來清除浮動。
因為BFC可以包含浮動，因此可以讓父元素生成一個新的BFC從而包圍浮動的子元素。
可以對父元素設定以下樣式之一生成新BFC。
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
<div style="border: solid 5px #0e0; width:300px;overflow:hidden;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>
(3)結合CSS特性的通用清除浮動方案，其本質還是第1種方法。
/*方法1*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
/*方法2*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
3、
有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？
（1）inherit
規定應該從父元素繼承 position 屬性的值
（2）static
默認值,沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）
（3）relative
生成相對定位的元素，相對于元素本身正常位置進行定位,因此，left:20px 會向元素的 left 位置添加20px
（4）absolute
生成絕對定位的元素，相對于static定位以外的第一個祖先元素（offset parent）進行定位,元素的位置通過 left, top,right 以及 bottom 屬性進行規定
（5）fixed
生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 left, top, right
以及 bottom 屬性進行規定
（6）sticky
CSS3新屬性，表現類似position:relative和position:fixed的合體，在目標區域在屏幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目標區域時，它的表現就像position:fixed，它會固定在目標位置
CSS有三種基本的定位機制：普通流，相對定位和絕對定位
普通流是默認定位方式，在普通流中元素框的位置由元素在html中的位置決定，元素position屬性為static或繼承來的static時就會按照普通流定位，這也是我們最常見的方式
相對定位比較簡單，對應position屬性的relative值，如果對一個元素進行相對定位，它將出現在他所在的位置上，然后可以通過設置垂直或水平位置，讓這個元素相對于它自己移動，在使用相對定位時，無論元素是否移動，元素在文檔流中占據原來空間，只是表現出來的位置會改變
絕對定位與固定定位相對定位可以看作特殊的普通流定位，元素位置是相對于它在普通流中位置發生變化，而絕對定位使元素的位置與文檔流無關，也不占據文檔流空間，普通流中的元素布局就像絕對定位元素不存在一樣
絕對定位的元素的位置是相對于距離最近的非static祖先元素位置決定的。如果元素沒有已定位的祖先元素，那么他的位置就相對于初始包含塊html來定位
因為絕對定位與文檔流無關，所以絕對定位的元素可以覆蓋頁面上的其他元素，可以通過z-index
fixed固定定位是屬于絕對定位中的一種。一般使用場景，例如：導航欄，右側工具欄，底部回到頂部按鈕等。它的定位是相對于瀏覽器的視窗口（viewport）來定的，而其他的絕對定位則是相遇于文檔（html）定位的。
4、
z-index 屬性指定一個元素的堆疊順序。因為絕對定位的元素脫離了普通流，所以絕對定位的元素可以覆蓋頁面上的其它元素。這時可以通過給元素設置z-index屬性來控制疊放順序，擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
z-index有三個屬性
auto 默認。堆疊順序與父元素相等。
number設置元素的堆疊順序。
inherit規定應該從父元素繼承 z-index 屬性的值。
5、
position:relative;只相對自己原本位置發生偏移，不影響其它普通流中元素的位置。
margin：除了讓元素自身發生偏移還影響其它普通流中的元素。
6、
BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。
BFC布局規則:
內部的Box會在垂直方向，一個接一個地放置;
Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此;
BFC的區域不會與float box重疊;
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此;
計算BFC的高度時，浮動元素也參與計算;
哪些元素會生成BFC?:
根元素;
float: left|right;
overflow: hidden|auto|scroll;
display: table-cell|table-caption|inline-block;
position: absolute|fixed;
BFC的作用有：
（1） 解決margin重疊問題。所謂margin重疊是指處于同一個BFC的相鄰元素、嵌套元素，只要它們之間沒有阻擋（如：邊框、非空內容、padding等）就會發生margin重疊。這是只要讓其中一個元素生成新的BFC就能解決margin重疊問題。
（2） 清除浮動。因為BFC可以包含浮動，所以讓父容器生成新的BFC可以讓父容器在視覺上包圍了浮動的子元素，因而清除了浮動。
7、
外邊距合并指的是，當兩個垂直外邊距相遇時，即當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并。它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
父子外邊距合并的條件是父元素沒有邊框和padding隔開。形成BFC 可以阻止外邊柜合并，如上一題的給元素添加浮動，絕對定位，inline-block,父子元素情況下，給父元素添加overflow不為none也可以阻止。
#d1 {
width:100px;
height:100px;
margin-bottom:20px;
}
#d2 {
width:100px;
height:100px;
margin-top:10px;
}
<div id="d1">
</div>
<div id="d2">
</div>
這時兩個div在垂直距離上的外邊距進行了合并，合并后的值是20px。
如果不想這樣，就在上一個元素里加一個：
display:inline-block;
阻止外邊距合并
為了阻止父子元素合并，父元素生成一個新的BFC, overflow, display...
給父元素加上一個邊框或者padding等..
