浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
特征：
- 浮动的元素生成新的BFC 脱离当前文档流。
- 浮动的元素会向左/右偏移直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。
对父容器的影响：由于不在同一个BFC中，浮动元素无法撑开父元素，父元素也不能包裹住浮动元素。
对其他浮动元素的影响：如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。
例：
对普通元素的影响： 普通元素会无视浮动元素的存在，占据浮动元素的位置，而浮动元素则会遮盖在普通元素的上面。
对文字的影响：文字可以感知到浮动元素的存在，并且自动环绕浮动元素。可以将文字用div包裹起来，然后清除对该DIV的浮动影响即可。
清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动元素对其他元素造成的各种影响。
清除浮动的办法:
- 对父元素添加clearfix类名，即可解决浮动元素无法撑开父元素的情况。clearfix如下
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
- 在父元素的子元素最后添加一个空div，并对其设置样式：clear:both;可解决浮动元素无法撑开父元素的情况，这种办法和clearfix办法原理相同，但是多余了一个div。
-
使用BFC清除浮动。
给元素添加以下属性会建立新的BFC。
给父容器新建BFC，则可以利用BFC包含浮动元素的特性，清除浮动元素不能撑开父元素的影响。
给普通元素新建BFC，则可以利用BFC不能重叠浮动元素的特性，而清除被浮动元素覆盖的影响。
给文字添加包裹层，然后给包裹层新建BFC，则可以使文字不环绕浮动元素。
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 继承父元素的position值 |
z-index 有什么作用? 如何使用?
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index属性适用于定位元素（position 属性值为 relative 或 absolute 或 fixed的对象）。
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative;：只相对自己原本位置发生偏移，不影响其它普通流中元素的位置。
margin：除了让元素自身发生偏移还影响其它普通流中的元素。
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC的全称是Block Format Content(块级格式化上下文)
满足下列css声明之一的元素便会生成BFC
- 根元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
但其中，最常见的就是overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就代表了该元素已经创建了一个BFC了。
BFC的作用：
防止父子元素的外边距合并：给父元素建立新BFC则不会使父元素和子元素的上下外边距合并。
清除浮动的影响：具体见上文提到的“使用BFC清除浮动”。
多栏布局的一种方式：与浮动元素相邻的已生成BFC的元素不能与浮动元素相互覆盖。利用该特性可以作为多栏布局的一种实现方式。
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
-
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
-
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
-
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
并且合并的两个边距值
都为正时：合并值取值较大的
一正一负时：合并值取两值之差
都为负时：合并值取绝对值较大的
阻止外边距合并的方法：
给其中一个元素建立新的BFC即可。
给父元素建立新BFC则不会使父元素和子元素的上下外边距合并。
按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素
给父元素添加padding 或者border则不会使父元素和子元素的上下外边距合并。
父子外边距合并范例：
代码：
<style>
body{
border:1px solid;
}
.father{
background: pink;
width:300px;
margin:50px;
}
.child{
background: red;
width:200px;
height:200px;
margin:50px;
}
</style>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
图示：
给父元素添加overflow:hidden;样式清除上下外边距合并后：
