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