任务11

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

• 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

Paste_Image.png Paste_Image.png

• 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

Paste_Image.png

不让相邻元素外边距合并用inlineblock和浮动元素边框不会合并。

Paste_Image.png

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

Paste_Image.png

方法二：

Paste_Image.png

方法三：

Paste_Image.png

方法四：

Paste_Image.png

方法五：（推荐写法）

Paste_Image.png

3.父容器使用overflow: auto| hidden撑开高度的原理是什么？
overflow值为auto| hidden时可以创建BFC修复高度坍塌，清除浮动。例如子容器设置高度大于父容器时，父容器会自动撑开。此时overflow:hidden会清除子容器浮动，子容器超出高度部分自动隐藏
4.BFC是什么？如何形成BFC，有什么作用?
首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
根元素

• float属性不为none
• position为absolute或fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow不为visible
  解决方法：
  1.在父容器里加入height属性，该方法适用于子元素高度已知并且固定的情况。
  2.在最后一个子元素后加入<div style="clear:both;"></div>，清除浮动元素。
  3.给父容器增加overflow:hidden属性。或者overflow:auto;zoom:1;overflow:auto;height:1%;
  4.浮动外部元素，float-in-float让父容器也浮动。
  5.使用after伪元素。对浮动元素增加after伪类。（IE8以上生效，在IE6、7中可在父容器中增加overflow:auto;或者overflow:hidden等）
  对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷。
  6.以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？

Paste_Image.png

以上代码的作用：清除浮动
兼容ie*zoom: 1;触发ie的hasLayout属性，清除浮动、清除margin的折叠。
区别：BFC撑开空间是使父元素本身形成一个独立空间来包容浮动元素，而这个方法是将父容器撑开。