CSS浮动定位BFC边距合并
浮动元素有什么特征？对父容器，其他浮动元素，普通元素，文字分别有什么影响？
浮动的框可以随float的属性值左右移动，直到他的外边缘碰到包含框或另一个浮动框的外边缘。
浮动元素不在文档的普通流中。
如果父容器高度是随内容而改变的，设置内部一个元素为float后，父容器高度变小。并且可以和普通元素占同一个位置，并且遮蔽。但是普通元素中的文字不会被遮蔽，会围绕在浮动元素周围。
清除浮动指什么？如何清除浮动？
如果父容器中的所有子元素变为浮动元素，父容器的高度会为0，要让父容器在视觉上包围浮动元素，就要用到清除浮动。如果父容器的高度不为0，清除浮动后，无效果。
在父容器中加入一个空的块级元素子标签，并设置其样式clear=both/left/right/none，可以达到清除浮动。
在CSS中写入
.clearfix:after {
content:" ";
dispaly: block/table;
clear: both/left;
}
也可以清除浮动。
有几种定位方式？分别是怎样实现的？参考点是什么？使用场景是什么？
普通流，默认定位方式，一般不用设置。元素框的位置由元素在html中的位置决定，如果设置元素的position值为static或继承了static，就会按照普通流定位。
相对定位，实现："position: relative; top: ; left: ;" 。相对于原位置的位移。元素在文档流中占据原来的空间，只是表现出位移。
绝对定位，实现："position: absolute; top: ;left: ; right: ;bottom: ;"相对于其上级元素中有属性为非static元素的位置，如果没有，就相对于初始块html元素定位。
z-index有什么作用？如何使用？
控制叠放顺序。
用于定位元素，z-index:数值;，如position:absolute;z-index:-1;表示在下一层。
position:relative和负margin都可以使元素发生偏移，二者有什么区别？
position:relative相对定位，还是占据原来的空间，只是表现出位移，其父容器不变。
负margin是改变外边距，其父容器大小会改变。
BFC是什么？如何生成BFC？BFC有什么作用？举例说明。
BFC，Block Format Content，块级格式化上下文。
生成BFC的方法
- float：left/right
- position:absolute/fixed
- display: inline-block/table-cell/table-caption
- overflow: auto/hidden/scroll
BFC会合并两个相邻或嵌套的元素的垂直外边距。设置不同的BFC就不会合并。
10-1.png
BFC会使浮动元素对普通流元素不遮挡。
10-2.png
BFC可以包含浮动，可以利用这个清除浮动。
10-3.png
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？举个父子外边距合并的例子。
改：
（同一个BFC下的两个相邻元素在垂直方向上会出现边距合并。
外边距合并，选其中数值大的为两个元素的外边距，若数值相等，取其中一个。对于负margin，负号只是表示方向。
让其中一个生成BFC就可以消除外边距合并）
原：
（两个相邻的有着相同BFC的元素会出现外边距合并。
外边距合并为二者中数值大的。
给其中一个设置BFC。）
10-4.png
10-5.png
