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

浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。浮动样式可以应用在块元素及行内元素上，

1、应用浮动后，元素在一排显示，且相邻之间没有空隙。

2、应用在行内元素上时可以让其像display:inline-block一样支持宽高。

3、默认内容撑开宽度

4、脱离文档流，父元素无法感知浮动元素的容量，如果父元素未设置高度值，父元素高度将无法只由浮动元素撑开。

5、浮动会提升层级半层，普通元素会被遮档，如文档流中文字图片内容与浮动元素所占用区域重合，文字内容会被挤开。

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

因为浮动元素脱离文档流，父元素无法感知浮动元素的容量，如果父元素未设置高度值，父元素高度将无法只由浮动元素撑开。

清除浮动的方法有：

1、空标签清浮动:在父元素的子元素的最后添加一个没有高度的空的块标签，并且设置属性 clear:both;

2、

标签清浮动：在父元素的子元素的最后添加一个

标签，并且设置属性 clear:both;

3、after伪类 清浮动方法。

父元素:after{content:'';display:block;clear:both;}父元素{zoom:1;}

after伪类： 元素内部末尾添加内容；

:after{content"添加的内容";} IE6，7下不兼容

zoom ：1 用来触发 IE下 haslayout，使元素根据自身内容计算宽高。

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

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

**relative **生成相对定位的元素，相对于其正常位置进行定位。还在文档流中，原来所占用的位不会被其它元素所占有。如，"left:20" 会向元素的 LEFT 位置添加 20 像素。

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。如果没有这样的祖先元素，则参照初始块即浏览器视口。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

**fixed **生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

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

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

Z-index 仅能在定位元素上奏效，元素可拥有负的 z-index 属性值。

用例：z-index:2;数值越高，越优先显示在上面。

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

position:relative 相对自身原来所占的位置，margin则相父元素设置外边距。

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

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

如何形成BFC ：

浮动（除none），绝对定位， display:inline-block/table-cells/table-captions, 和overflow的值不为visible, 时可以创建一个新的格式化上下文。BFC可以清除浮动（给浮动元素的父级加绝对定位或浮动样式都可以达到清除浮动的作用），和阻止margin合并。

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

外边距合并:两个在普通文档流中相邻的元素外边距相遇的时候发生合并。这个相邻可以是父子关系相邻，兄弟关系相邻，一个元素内部没有东西，自身的上下边距相遇时都会发生外边距合并。合并的结果： 两个外边距都是正数，取两者之中的较大者；两个外边距都是负数，取两者之间绝对值较大者；当两个外边距一正一负时，取两者的和。