任务11：inline-block、BFC、边距合并

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

场景：

当相邻元素和父子元素（也可能是祖先关系）没有边框限制，而且是垂直外边距相遇时，会出现外边距合并。

如何合并：

（1）两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值；
（2）两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值；
（3）两个外边距一正一负时，折叠结果是两者的相加的和。

如何不让相邻元素外边距合并：

（1）使用float属性；
（2）在相邻的每个元素上添加一个父容器，在父容器上设置overflow: auto/hidden或display: inline-block;来形成一个BFC，从而相互隔离，互不影响。

范例：

父子外边距合并

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

（1）将元素排成一行，例如：

（2）分行写，例如：

（3）设置inline-block元素为负margin，即：margin-left: -4px，由于设置的是外边距，所以第一个子元素会在左边溢出一点，因此需要将第一个子元素设置为margin-left: 0；这样在左边就不会溢出；
（4）在父容器上设置font-size: 0；但是在inline-block元素上必须设置font-size；
（5）通过添加float: left，在父容器上使用overflow: auto/hidden;撑开。

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

让元素脱离文档流，创建一个容器，从而形成BFC，这样就有了一个独立的空间，不受浮动元素的影响。

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

BFC(Block formatting context)是指"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

如何形成BFC：

（1）浮动
（2）绝对定位
（3）overflow: auto/hidden
（4）display:inline-block、table-cells、table-captions、或inline-flex

作用：

（1）BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
（2）BFC不会重叠浮动元素
（3）BFC可以包含浮动
（4）BFC可以形成一个独立的空间，和其他空间相互隔开，互不影响。

BFC布局规则：

（1）内部的Box会在垂直方向，一个接一个地放置。
（2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
（3）每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
（4）BFC的区域不会与float box重叠。
（5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
（6）计算BFC的高度时，浮动元素也参与计。

5.浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法

浮动导致的父容器高度塌陷、为什么会产生：

当父容器没有设置高度，而子元素全部浮动时，子元素会脱离文档流，父容器就会视为内部没有任何子元素，也就是说父容器内没有任何子元素来支撑，所以父容器就为0，从而父容器高度塌陷。

解决方法：

（1）在父容器上设置display: inline-block;
（2）在父容器上设置overflow: auto/hidden;
（3）通过父容器浮动形成BFC；
（4）在浮动元素后面添加一个空元素，并对空元素进行清除浮动；
（5）在浮动元素的父容器上添加伪类元素，并设置：

.clear:after{
     content: ' ';
     display: inline-block;
     clear: both;
}
.clear{
     *zoom: 1
}

6.以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？

.clearfix:after{
   content: ''; 
   display: block; 
   clear: both;
}
.clearfix{ 
   *zoom: 1;
}

作用：

.clearfix:after：在class="clearfix"上添加一个伪类；
content: ''：添加一个为空的字符；
display: block：设置为块级元素；
clear: both：清除浮动；
*zoom: 1：兼容IE6/7。

为什么会产生作用：

在父容器后面添加了一个空字符的伪类元素，进而用clear为其清除浮动。

区别：

BFC撑开空间是构建一个独立空间从而隔离其他空间，包含了浮动元素。而.clearfix方法是构建一个空块元素，通过清除浮动以撑开父元素。