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

1. 特征：浮动元素会脱离文档流，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。

2. 对父容器的影响：浮动元素脱离文档流向左或者向右移动，直到边框碰到父元素的边缘。引起的父元素高度塌陷。
3. 其它浮动元素的影响：如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。
4. 对普通元素的影响：浮动元素之前的普通元素不受影响。浮动元素之后的普通元素因感知不到浮动元素的存在会被浮动元素覆盖。
5. 对文字的影响：文字会感知到浮动元素的存在，会留出空间，形成环绕效果。

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

清除浮动指：消除浮动元素对其父元素因浮动元素造成的高度塌陷的问题
方法一：在父元素的子元素最后添加一个空div，并对其设置样式：clear:both;（很少用）
方法二：使用伪元素清除浮动：

.clearfix:after{ 
content:""; display:block; visible:hidden; clear:both;
}

方法三：使父元素形成新的BFC，可以使用overflow：hidden/auto/scroll
display:inline-block float:方位等等

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

CSS有四种基本的定位机制：普通流(static)，相对定位(relative)，绝对定位(absolute)和固定定位(fixed)

1. 普通流(static)：默认定位方式，没有定位，元素出现在正常的文档流中。参考点是文档流中的位置。
2. 相对定位(relative)：相对于元素本身正常位置进行定位，通过top、bottom、left、right属性来设置偏移量。使用场景：为绝对定位设定参照物或对元素自身位置进行局部调整。
3. 绝对定位(absolute)：相对于static定位意外的第一个祖先元素进行定位，若都没有发现则以html标签为参考进行定位。使用场景：当想让元素参照特定参照物进行定位时使用。
4. 固定定位(fixed)：相对窗口进行定位，其不会随着页面翻动而移动，其完全脱离文档流。

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

z-index 属性设置元素在Z轴方向上的堆叠顺序。数值越大，元素越靠前。可设置负的 z-index 属性值。Z-index 仅能在定位元素（position:relative/absolute/fixed）上奏效。当我们用 z-index 属性指定元素的堆叠顺序时，我们并不总是指定这个元素的堆叠顺序相关于页面内的其他元素。元素的堆叠顺序只是相关于其堆叠上下文，如果一个元素指定z-index那么这个元素是其子元素的堆叠上下文。

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

1. 外边距合并：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
   合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

2. 父子元素外边距合并：当一个元素包含在另一元素中时（两个元素中间没有内边距和边框隔开），它的上下外边距就会合并。
3. 不让相邻元素外边距合并：阻止嵌套元素的外边距合并形成BFC可以阻止外边柜合并或者元素上加上border或者padding。
4. margin为负时外边距合并情况：当两个外边距都为负时，取绝对值的较大值。当两个外边距为一正一负时，取两值的和。
5. 父子外边距合并的范例：

div{
  width:200px; height:200px; margin-top:10px;
}
p{
  width:200px;  height:20px; margin-top:30px;
}
<div>                       
  <p>子元素</p>
</div>                              //子元素的外边距虽然设置为30px,其实为0，因为合并了

div{
  width: 300px; height: 300px; margin-bottom: 30px; background-color: red;
}
p{
  width: 100px; height: 100px; margin-top: 10px; background-color: blue;
}
<div></div>
<p></p>    //p标签和div的实际间隔是30px，而不是40px

div{
  width:200px; height:200px; margin-top:30px;
}
p{
  width:200px;  height:20px; margin-top:-10px;
}
<div>                       
  <p>子元素</p>
</div>                              //父元素的外边距虽然设置为30px,其实为20px，因为合并了

8. 代码

代码1
代码2
代码3
代码4

（mission10）