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

特征：
1 使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素则停下。
2 浮动样式可以应用在块元素及行内元素上。元素浮动之后不占据原来的位置。
3 元素在一排显示，相邻间没空隙。应用在行内元素上时可以让其像块级元素一样设置宽高。

对父容器的影响：
如果一个父容器的子元素都是浮动元素，且本身没有设置宽高就会导致父元素塌陷。

对父容器的影响 解决方法

对其他的浮动元素：
所有的浮动元素会水平排列知道直到遇到父级边界，如果宽度不够就换行向下排列，此时如果第一个的高度高于第二个就会导致下图的现象。

对浮动元素的影响 解决方法

对普通元素的影响：
对于普通元素认为浮动元素是不存在的，所以如果会导致浮动元素覆盖在普通元素的上面。如下图：

对行内元素的影响 解决方法

对文字的影响：
普通的元素认为浮动元素是不存在的，但是文字认为它是存在的，如下图绿色的div被覆盖了，但是它的文字内容却在红色的浮动的div外面。

对文字的影响 解决方法

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

1 使用clear样式，clear： left | right | both;
2：利用BFC来清除浮动。
因为BFC可以包含浮动，因此可以让父元素生成一个新的BFC从而包围浮动的子元素。因此给父容器设置BFC,就可以解决父容器在子元素都为浮动时的塌陷问题，因此可以清楚浮动。

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

CSS有三种基本的定位机制：普通流，相对定位和绝对定位
普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式
相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变

• inherit 规定应该从父元素继承 position 属性的值
• static默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
• relative生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px会向元素的 left 位置添加20px
• absolute生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right以及 bottom 属性进行规定
• fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定
• stickyCSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置普通流与相对定位

relative absolute fixed

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

绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index的值越高，元素位置越靠上
z-index有三个值：auto(默认，堆叠顺序与父元素相等)，number(设置元素的堆叠顺序，值越大，元素位置越靠上)，inherit(从父元素继承z-index属性的值)

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

position:relative 是相对于自己本来的位置发生偏移，对其他元素无影响
mairgin:负值 会影响周围的普通流元素

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

BFC全称是Block Format Content——块级格式化上下文：浮动、绝对定位的元素(absolute、fixed定位)、块容器(display属性为inline-block,table-cells,table-captions)、以及带有overflow属性(该属性值不为visible)的display为block的块级元素会建立新的块级格式化上下文——元素们处于同一个块级格式化上下文时，会遵守相同的规则/格式(例如垂直排列的两个元素的margin会重叠)，但是处于不同的块级格式化上下文时，元素的排列展示遵守的规则/格式是不同的(处于不同BFC的垂直排列的两个元素的margin是不会重叠的)
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
BFC的作用：
BFC会阻止垂直外边距(margin-top,margin-bottom)的折叠
BFC可以包含浮动(使用浮动元素可能会出现父容器高度为0的现象)

BFC BFC

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

在同一个BFC中相邻元素的上下外边距会合并
合并时，取较大值为外边距

解决方法 父子元素外边距（上下）合并 解决方法