1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

浮动元素的特征：首先脱离文档正常流，根据设置的浮动方式向左或向右浮动，直到遇所处容器的的边框或其它浮动元素。
对父容器的影响：会使父容器高度塌陷；
对其它浮动元素的影响：会阻止其它浮动元素继续移动；
对普通元素的影响：普通元素就像感知不到浮动元素的存在，浮动元素会覆盖住普通元素；
对文字的影响：文字能够感知到浮动元素，会环绕浮动元素按顺序显示

2.清除浮动指什么? 如何清除浮动? 两种以上方法

清除浮动指什么？

块状元素，会钻进浮动元素的下面，被浮动元素所覆盖

1

行内元素，例如文字，则会环绕在浮动元素的周围，为浮动元素留出空间

2

浮动元素的父元素坍缩

3

如果我们不希望要这些效果，就需要清除浮动来解决后患，使后面的元素表现的跟浮动前一样，这样我们既实现了黄色元素浮动，又实现了后来的元素不会受其影响产生不必要的麻烦

清除浮动的方法？

方法一：添加新的元素，应用clear:both;
HTML:

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="clear"></div>
</div>

CSS：

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

方法二：父级div定义 overflow: auto（注意：是父级div也就是这里的 div.outer）是其形成BFC。
HTML：

<div class="outer over-flow"> //这里添加了一个class
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <!--<div class="clear"></div>-->
</div>

CSS

.over-flow{
    overflow: auto; 
    *zoom: 1; //zoom: 1; 是在处理兼容性问题
}

原理：设置父容器为下列属性中的一个，使得父容器形成BFC，从而达到“清浮动”效果：

float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed
方法三：为父元素设置：after来清除浮动
HTML：

<div class="outer"> //这里添加了一个class
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <!--<div class="clear"></div>-->
</div>

CSS

 /*方法1*/
.outer{
    *zoom: 1; //zoom: 1; 是在处理兼容性问题
}
.outer:after{
    content:"";
    display:block;
    clear:left;
}
 /*方法2*/
.outer{
    *zoom: 1; //zoom: 1; 是在处理兼容性问题
}
.outer:after{
    content:"";
    display:table;
    clear:both;
}

3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

static（默认）
元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
参考点：普通文档流
使用场景：默认不加其他定位方式就是static
inherit
从父元素继承position
relative
相对定位元素，设置偏移后其原本占据的位置仍在文档中。
参考点：相对于元素本身正常位置进行定位
使用场景：不想影响其他元素的位置、作为绝对定位的参考点。
absolute
生成绝对定位的元素，脱离文档，不再占据文档中的空间，其他元素会填充原本的空间
参考点：相对于static定位以外的第一个祖先元素（offset parent）进行定位
fixed
固定定位，脱离文档流，不再占据原空间
参考点：相对于浏览器窗口
使用场景：应用在各种不随滚动条变化的内容
sticky：
属性：CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。由于兼容性问题，此类效果通常由js实现。

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

非static元素在现实时是可以重叠的，z-index解决重叠时的显示次序问题，使用在已经被定位为relative absolute或fixed的元素中，值为正整数，数值越大越垂直方向靠近屏幕方向。

5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

使用position:relative偏移元素之后，元素原先占据的文档空间没有发生变化，不会影响到其他元素的位置。
使用负margin偏移元素，会改变元素本身所占据的文档空间，会影响其他元素的位置布局

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

BFC定义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干
生成BFC:

设置float为left或者right。
设置overflow为hidden、auto、scroll三者中的一种。
设置display为inline-block、table-caption、table-cell三者中的一种。
设置position为inline-block, table-cell, table-caption, flex, inline-flex.

作用：

BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
BFC不会重叠浮动元素demo
BFC可以包含浮动demo

7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

合并条件：
只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠
如何合并：
当垂直外边距发生合并时，无论是兄弟元素还是父子元素之间，垂直外边距会取他们中margin值较大的一方。margin为负值则是取两个margin值的和。
如何不让相邻外边距合并：