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

基本概念：浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，因此文档普通流中的块级元素感知不到浮动元素的存在。
对父容器影响：浮动元素脱离文档流向左或者向右移动，直到边框碰到父元素的边缘。引起的父元素高度塌陷。
对其他浮动元素的影响：父容器足够宽，与其他浮动元素同一水平方向依次排列。父容器宽度在同一水平方向上不能同时容纳全部浮动元素时，超出父容器宽度的浮动元素向下移动,直到有足够的空间,如果水平排列三个以上高度不同浮动元素，那么向下移动的时候可能被卡住。
对普通元素的影响：浮动元素之前的普通元素不受影响。浮动元素之后的普通元素因感知不到浮动元素的存在会被浮动元素覆盖。
对文字的影响：文字所在行框（或display：inline-block）因为浮动元素的挤压而缩短，从而围绕浮动元素排列。

2. 清除浮动指什么? 如何清除浮动?

如果没有预先设置父元素高度，子元素浮动（脱离标准文档流)会引起父元素高度塌陷。因为大多数时候，父元素不设置高度，其高度由子元素撑起。浮动（脱离标准文档流)后，浮动元素不占据标准文档流空间，不能够撑起父元素，从而引起父元素高度塌陷。

清除浮动指：消除浮动元素对其父元素因浮动元素造成的高度塌陷的问题。

• 清除浮动方法1：给浮动的元素的祖先元素加高度。只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
• 清除浮动方法2：clear:both。clear就是清除，both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。这种方法有一个非常大的、致命的问题，margin失效了。
• 清除浮动方法3：使父元素形成新的BFC，可以使用overflow：hidden/auto等等。

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

• 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，它会固定在目标位置

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

z-index 属性设置元素在Z轴方向上的堆叠顺序。数值越大，元素越靠前。可设置负的 z-index 属性值。Z-index 仅能在定位元素（position:relative/absolute/fixed）上奏效。

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

position:relative，元素显示位置发生变化，但是元素在文档流中的位置不变，不影响后面元素在文档流中的布局。
负margin，元素的显示位置和在文档流中的位置均发生变化，会影响后面元素在文档流中的位置。

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

BFC是块级格式上下文。其定义是：浮动、绝对定位（绝对定位、固定定位）元素、块级容器（如inline-block、 table-cell、table-caption）并不是块级盒子，还包括哪些overflow属性值取值visible以外的块级盒子，会为它们的内容物创建一个新的块级格式化上下文。对元素设置以下属性就可以生成BFC：

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

BFC的作用有：
（1）解决margin重叠问题。所谓margin重叠是指处于同一个BFC的相邻元素、嵌套元素，只要它们之间没有阻挡（如：边框、非空内容、padding等）就会发生margin重叠。这是只要让其中一个元素生成新的BFC就能解决margin重叠问题。
（2）清除浮动。因为BFC可以包含浮动，所以让父容器生成新的BFC可以让父容器在视觉上包围了浮动的子元素，因而清除了浮动。

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

外边距合并指的是，当两个盒子处于同一个BFC中时，它们的外边距和重合。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。浮动之后，相邻的外边距就不会合并。

父子外边距合并