浮动定位BFC边距合并

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

浮动元素会脱离原本的文档流，浮动框会根据设定值在左右移动，直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。
对父容器而言，父元素的 height 和 width 不会因为浮动元素的存在而被撑开，如果这个父容器内包含的子元素全部是浮动元素，那么它的宽高都会默认为0。
对其他浮动元素而言，如果包含块太窄无法容纳水平排列的全部浮动元素，那么其它浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡住。
对其他普通元素而言，浮动元素的框会表现得像不存在，但普通元素框内的浮动元素旁边的行框会被缩短，给浮动元素留出空间，行框围绕着浮动框，即文字会围绕着浮动框。

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

使用 clear 属性可以设置不允许元素左右出现浮动元素：

clear: left 不允许元素左边出现浮动元素
clear: right 不允许元素右边出现浮动元素
clear: both 元素两边都不可以出现浮动元素
clear: none 不清除浮动

清除浮动是为了解决浮动父容器高度塌陷问题，让父元素在视觉效果上包裹浮动元素。

将父元素的最后子元素的 clear 属性值为 both ，父元素被撑开，在视觉上父元素包裹住所有子元素。
可以将父元素设置为BFC来清除浮动。

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

static —— 默认值，没有定位，元素出现在正常流中
relative —— 相对定位，相对于元素本身正常位置定位，对其他元素来说，相对定位的元素的原位置仍然可见，定位时保留
absolute —— 绝对定位，相对于第一个非 static 定位的祖先元素进行定位，以该祖先元素的内边框为基准，即包括内容区和内边距，对其他元素来说，绝对定位的元素的位置是不可见的，原位置也不做保留
fixed —— 绝对定位，相对于浏览器窗口进行定位，对其他元素来说，绝对定位的元素的位置是不可见的，原位置也不做保留
sticky —— CSS3新属性，相当于relative和fixed的结合，但兼容性差，不常使用
inherit —— 从父元素继承 position 属性

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

z-index 可以控制元素的叠放顺序，z-index 越高，元素位置越靠上。
z-index 的默认值为 auto，不具有继承属性，可以通过设置数值或 inherit 从父元素继承来设置 z-index 的属性值，可以设置负值。

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

负 margin 可以和其他定位方式结合使用，但如果设置 position: relative 就不能再使用其他的定位了。
使用 position: relative，元素本身在文档流中的位置不会发生改变，但使用负 margin 会使元素本身在文档流中的位置发生改变。

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

BFC 块级格式化上下文（block format content），BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
元素设置左/右浮动，overflow 属性设置为 hidden 或 scroll，display 设置为inline-block、table-cell 或 table-captain，position 设置为 absolute 或 fixed，即可生成BFC。
BFC会阻止垂直外边距合并；BFC可以包含浮动；BFC不会重叠浮动元素。
可以使用BFC解决外边距重叠问题，也可以用来清除浮动。

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

外边距合并指的是，块级元素的上外边距和下外边距相遇时有时会合并为单个外边距。
以下三种情况会导致外边距合并：

毗邻兄弟元素：
毗邻的两个兄弟元素之间的外边距会塌陷（当后者被清除浮动时除外），此时两元素之间的外边距为上面元素的下外边距和下面元素的上外边距中的较大值。
块级父元素与其第一个/最后一个子元素：
如果块级父元素中，不存在上边框、上内边距、inline content、清除浮动这四条属性时，那么这个块级元素和其第一个子元素的上边距就挨到了一起，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。类似的，若块级父元素的 margin-bottom
与它的最后一个子元素的margin-bottom之间没有父元素的 border、
padding、inline content、height
、min-height、max-height 分隔时，就会发生下外边距合并现象。
空块元素：
如果存在一个空的块级元素，其 border
、padding、inline content、height、min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。

外边距合并计算规则

当两个外边距都是正值时，按较大值的外边距显示
当两个外边距一正一负时，保留两个外边距值相加之和的外边距，如果计算值为负值，则下层的元素会被覆盖一部分
当两个外边距都为负值时，按绝对值较大的外边距显示

阻止外边距合并：
为父元素设置 border、padding，使父子元素的外边距接触不到，就可以避免父子元素的外边距合并，另外形成BFC也可以阻止外边距合并。

有css代码如下：

.fa{
  margin: 20px;
  background-color: #abc;
}

.child1{
  z-index:20;
  background-color: pink;
  margin: 20px;
}

.child2{
  background-color: yellow;
  margin: 30px;
}

.child3{
  background-color: #786;
  margin:40px;
}

如图，方块1的上外边距和父元素的上外边距发生了合并，方块3的下外边距和父元素的下外边距发生了合并，1、2、3之间也发生了外边距合并：

外边距合并