任务11

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

1.当两个垂直元素外边距相遇时就会出现外边距合并;合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。一正一负，取和;都为负数，则取负数绝对值的最大值。
- 父元素与子元素的外边距合并，如下图:
  
  父元素的上外边距为20px,子元素的上外边距为40px,最后绿色区域距上外边距是40px;
- 兄弟元素的外边距合并,如下图:
  
  如上图蓝色区域的上下外边距是40px,黄色区域的上外边距是40px,最后这两块间的距离合并为40px。
- 元素自身的外边距合并，如下图:
  
  3块是空元素，它有外边距，但是没有边框或填充,所以它跟上下两个兄弟元素外边距合并了。
2.如何合并:
- 两个相邻的外边距都是正数时，合并取它们两者之间较大的值。
- 两个相邻的外边距都是负数时，合并取两者绝对值的较大值。
- 两个外边距一正一负时，合并取两者相加的和。
3.如何不让相邻元素外边距合并?
不合并可以使用inline-block，float，overflow形成BFC，相邻就不合并了,如下所示:
- 使用浮动，如下图所示:
  
  浮动元素不与任何元素产生外边距合并.
- 使用display:inline-block,如下图所示:
- 使用overflow:hidden,如下图所示:
  
  给子元素加了父元素div之后，利用overflow:hidden，外边距不合并，可见父元素创建BFC与子元素的外边距不发生合并，同时两个父元素内的子元素也不发生合并。
- 使用绝对定位的元素，不与任何元素发生外边距合并,如下图所示:

综上所述:两个元素外边距会不会合并主要看它们外边距之间有没有分界线存在。要想让两个元素的外边距不合并，就要让它们之间有道分界线，这个分界线可以是border，padding或者是BFC形成的独立空间。

2.去除inline-block内缝隙有哪几种常见方法?

如下图所示:

去除的方法有四种:
- 1.去除标签之间的空格（即不换行or拆开标签）
- 2.使用负margin
- 3.使用float
- 4.父容器设置font-size=0
如下图所示:

3.父容器使用overflow: auto| hidden撑开高度的原理是什么？

父容器使用overflow: auto| hidden时可以创建BFC修复高度坍塌，清除浮动。例如子容器设置高度大于父容器时，父容器会自动撑开。此时overflow:hidden会清除子容器浮动，子容器超出高度部分会自动隐藏;

4.BFC是什么？如何形成BFC，有什么作用?

BFC的概念：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）
如何形成BFC？
- 用float属性（none值除外）；
- 用绝对定位absolute；
- overflow（visible值除外）；
- display属性为table-cell, table-caption, inline-block, flex, 或者inline-flex;
作用:
- ①清除浮动
- ②防止外边距合并
- ③用于布局，比如两栏布局
- ④清除文字环绕