float即为浮动，在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。下面解释下这个定义中的几个名词的概念：
文档流：在html中文档流即为元素从上至下排列的顺序。
脱离文档流：元素从正常的排列顺序被抽离。
最左边/最右边：上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界（不包括padding）。
参考: [https://www.w3cplus.com/css/float.html]
1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动元素的特征：
浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示。
浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐。
浮动元素后面的内联元素会向此浮动元素的外边距靠齐。
对父元素的影响：对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷。
对其他浮动元素的影响：同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面。
反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下。
对普通元素的影响：如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。
如果如果兄弟元素为内联元素，则元素会环绕浮动元素排列。
对文字的影响：文字会环绕浮动元素排列。
2.清除浮动指什么? 如何清除浮动? 两种以上方法。
清楚浮动指解决浮动父容器高度塌陷问题。
清除浮动的方法可以分成两类：
一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。
二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素.
解决方法：
1.使用带clear属性的空元素，在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
<div style="clear:both;"></div>
</div>
2.使用CSS的float，overflow，display，position属性。float为 left|right，overflow为hidden|auto|scroll，display为 table-cell|table-caption|inline-block，position为 absolute|fixed，例如为父元素设置容器宽高或设置 zoom:1。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
<div style="border: solid 5px #0e0; width:300px;overflow:hidden;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>
3.使用CSS的:after伪元素，给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素清理浮动。
/方法1/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
/方法2/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
CSS有三种定位方式：absolute定位，relative定位和fixed定位。
absolute定位：1.通过left/top/right/buttom，以具有position属性的父元素为参考进行定位。2.absolute偏移的参考点首先是父元素，然后检查该父元素是否具有position属性，若具有position属性，则以该父元素为参考点进行偏移，若不具有则继续往上一级找，直到body标签为止。3.使用场景是需要相对于父元素或者body进行定位。
relative定位：1.通过left/top/right/buttom，以自己的位置进行定位。2.relative偏移的参考点是自身位置，是拿偏移前的位置与偏移后的位置进行比较，比如top10px，表现出来的其实是向下移动10px。3.使用场景是偏移前的位置需要保留，不脱离文档流。
fixed定位：1.通过left/top/right/buttom，以浏览器窗口进行定位。2.fixed偏移的参考点是浏览器窗口。3.使用场景是固定于浏览器的某个位置不动。
4.z-index 有什么作用? 如何使用?
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
值 | 描述
|````|`````|
auto | 默认。堆叠顺序与父元素相等。
number | 设置元素的堆叠顺序。
inherit | 规定应该从父元素继承 z-index 属性的值。
例如：
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别。
- position:relative发生偏移后，在文档流中的位置不变。
- 负margin会改变元素在文档流中的位置。
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC的全称是 Block Format Content块级格式化上下文。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
生成方法：可以对父容器添加这些属性来生成BFC：
float为 left|right
overflow为 hidden|auto|scroll
display为 table-cell|table-caption|inline-block
position为 absolute|fixed
作用：1. 自适应两栏布局；2.清除内部浮动；3. 防止垂直 margin 重叠。
例如2:
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>```
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例。
兄弟元素合并：当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
父子间合并：当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
空元素：假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
两个相邻的外边距都是正数时，合并结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，合并结果是两者绝对值的较大值。
两个外边距一正一负时，合并结果是两者的相加的和。
防止合并：
对于兄弟元素：设置浮动，display：inline-block或使其父元素均形成BFC可防止边距合并（如overflow:hidden）
对于父子间的元素：可以给父元素设置border或padding属性来防止合并。
对于空元素：设置border或padding属性或overflow：hidden等（形成BFC）来防止合并。
[代码1](http://js.jirengu.com/hihibiwexu)
[代码2](http://js.jirengu.com/luyozovoma)
[代码3](http://js.jirengu.com/qiciqizice)
[代码4](http://js.jirengu.com/nozivosozi)