1.浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響？

浮動模型也是一種可視化格式模型，浮動的框可以左右移動（根據float屬性值而定），直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣。浮動元素不在文檔的普通流中，文檔的普通流中的元素表現的就像浮動元素不存在一樣.

• 對父容器的影響：當父容器的子元素都是浮動元素時，那么父容器將會高度坍塌。如下例：
  

• 對其他浮動元素影響： 如果包含塊兒太窄無法容納水平排列的三個浮動元素,那么其它浮動塊兒向下移動,直到有足夠的空間,如果浮動元素的高度不同,那么向下移動的時候可能被卡住。如下例：
  

• 對普通元素影響：浮動元素脫離普通流，如果浮動元素后面有個文檔流中的普通元素，那么這個普通元素的框會表現的浮動元素不存在。如下例：
  

• 對文字影響： 浮動元素后面的文檔流中的元素，這個元素的框會表現的像浮動元素不存在，但是框的文本內容會受到浮動元素影響，會移動以留出空間。
  浮動元素旁邊的行框被縮短,從而給浮動元素流出空間,因而行框圍繞浮動框。如下例：
  

2.清除浮動指什么？如何清除浮動？兩種以上方法

清理浮動：解決父容器高度坍塌問題

方法1

如果我們想讓父元素在視覺上包圍浮動元素可以在父元素最后添加一個空div，
<div style="clear:both;"></div>對它清理。缺點是增加了一個無意義的標簽，如下例：

方法2

使父容器生成BFC,因為BFC可以包含浮動，從而達到“清除浮動”效果，如何形成浮動：

• float為 left|right
• overflow為 hidden|auto|scroll
• display為 table-cell|table-caption|inline-block
• position為 absolute|fixed
  但是注意用BFC特性清理浮動都有副作用：比如float： left;讓父容器變成浮動元素
  副作用較小的是： overflow： auto;或者overflow: hidden;

通用的清理浮動法案

 /*方法1*/
  .clearfix{
      *zoom:1;
  }
  .clearfix:after{
      content: "";
      display: block;
      clear: both;
  }


  /*方法2*/
  .clearfix{
    *zoom:1;
  }
  .clearfix:after{
    content:"";
      display:table;
      clear:both;
  }

3.有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？

css定位方式有四種：默認定位（static）、相對定位（relative）、絕對定位（absolute）和固定定位（fixed）

• static:默認值。沒有定位，元素在正常的流中,top,right,bottom,left和z-index屬性無效。
  參考點：無

• relative:生成相對定位的元素，通過top,bottom,left,right的位置相對于其原來位置進行定位。left:20px 會向元素的 left 位置添加20px

其中的相對指的是相對于元素在默認流中的位置。元素偏移之后，他本來在默認文檔流中占據的位置仍然存在，其緊挨其后的元素的定位依據它本來的位置定位
參考點：元素本身位置
使用場景：元素相對偏移
案例：

• absolute：生成絕對定位的元素，相對于static定位外的第一個父元素進行定位。元素的位置通過 left, top, right 以及 bottom 屬性進行規定。

絕對定位的元素已經脫離了文檔流，普通流中其他元素的布局就像絕對元素不存在一樣；絕對定位的元素的位置是相對于最近的已定位的祖先元素，如果元素沒有已定位的祖先元素，它的位置就相對于body根元素；絕對定位的框可以覆蓋頁面的其他元素。
參考點：距離最近的非static元素，否則為body
使用場景：垂直水平居中
案例：

top: 20px; left:20px 相對的值是看其父容器是否存在 position：relative;absolute;fixed;這三個值，如果有就是相對父容器的內邊框。
當父容器里有 絕對定位 的子元素時，子元素設置width:100%實際上指的是相對于父容器的padding+content的寬度。當子元素是非絕對定位的元素時width:100%才是指子元素的 content 等于父元素的 content寬度查看范例http://js.jirengu.com/jatog/1/edit

• fixed: 本質上是一種絕對定位，不為元素預留空間。通過指定相對于屏幕視窗的位置來指定元素的空間，且元素的位置在屏幕滾動時不會發生變化。應用于很多網站頂端的固定導航、右下角的固定廣告等等。
  參考點：瀏覽器窗口
  使用場景：登錄框覆蓋層

注意只有position: relative; absolute; fixed;才能設置top left 等的值；

4.z-index有什么作用？如何使用？

z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。如果為正數，則離用戶更近，為負數則表示離用戶更遠。Z-index 僅能在定位元素上奏效。

5.position:relative和負margin都可以使元素位置發生偏移?二者有什么區別?

position:relative和負margin都可以使元素位置發生偏移,二者區別：

• position:relative相對定位后元素位置發生偏移，只是視覺上顯示的位置變化，但是它仍會占據原來的空間，不會影響其他文檔流元素。
• 負margin會使元素在文檔流中位置發生偏移，會影響周邊的元素位置變化

6.BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明

• BFC:全稱是 [Block Format Content] ,塊級格式化上下文(http://www.w3.org/TR/CSS21/visuren.html#block-formatting)，

BFC特性：
1.BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊
按照BFC的定義，只有同屬于一個BFC時，兩個元素才有可能發生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內容，padding等)就會發生margin重疊。
因此要解決margin重疊問題，只要讓它們不在同一個BFC就行了，但是對于兩個相鄰元素來說，意義不大，沒有必要給它們加個外殼，但是對于嵌套元素來說就很有必要了，只要把父元素設為BFC就可以了。這樣子元素的margin就不會和父元素的margin發生重疊
2.BFC不會重疊浮動元素
3.BFC可以包含浮動

• 生成BFC:

• float為 left|right
• overflow為 hidden|auto|scroll
• display為 table-cell|table-caption|inline-block
• position為 absolute|fixed

• BFC作用：
  1.會阻止垂直外邊距（margin-top、margin-bottom）折疊
  2.清除浮動

7.在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例

當塊處于同一個文檔流同一個BFC中，兩個元素才有可能發生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內容，padding等)就會發生margin重疊。對于父子元素，容器沒有padding和border內部的margin會導致外邊距合并。
相鄰元素box1和box2的垂直外邊距合并，如下例，

合并規則：
1.兩個margin都是正值的時候，取兩者的最大值；
2.當 margin 都是負值的時候，取的是其中絕對值較大的，然后，從0位置，負向位移；
3.當有正有負的時候，先取出負 margin 中絕對值中最大的，然后和正 margin 值中最大的 margin 相加。

如何不讓相鄰元素外邊距合并：
1.被非空內容、padding、border 或 clear 分隔開。
2.不在一個普通流中或一個BFC中。
3.浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 折疊（注意這里指的是上下相鄰的元素）。

父子外邊距合并見下例：

解決外邊距合并，讓父容器設為BFC就可以了。給父容器加入overflow: auto;包裹h1，使得h1的margin內部生效，從而不會margin合并。這樣子元素的margin就不會和父元素的margin發生重疊。如下例：

參考http://blog.csdn.net/github_37037281/article/details/55505825