在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？

• 当两个或更多垂直外边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内元素、浮动框、绝对定位框之间的外边距不会叠加。

一共有三种情况
1、当两个元素在垂直方向上相遇时,它们的边距是这两个个边距中最大的那个边距。

2、 当一个元素包含另一个元素时（没有内边距或边框把内外两个元素的外边距分隔开），它们的上外边距或下外边距也会发生合并

3、外边距与自身发生合并，一个空元素，它有外边距（无边框或填充）。在这种情况下，上外边距与下外边距就会发生合并

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

• 删除html中设置inline-block的元素之间的空白换行。如：< li>间隙< /li>< li>消除< /li>，li标签之间紧邻
• 使用负边距：margin-left：-4px;第一个元素要单独设置margin-left:0;
• 给父元素设置 font-size:0; 但当前元素要重新设置字体大小。

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

• 使父元素形成一个BFC，从而使父元素形成一个独立的块级元素区域，撑开里面内容

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

• BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域， 它规定了内部的Box如何布局，形成隔离的独立容器，容器里面的子元素不会影响到外面的元素。

• 如何生成生成BFC

  根元素
  float属性不为none
  position为absolute或fixed
  display为inline-block, table-cell, table-caption, flex, inline-flex
  overflow不为visible

• 作用：形成独立的块级区域，消除浮动元素对父元素和其子元素带来的影响。

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

• 父元素的高度无法撑开，影响与父元素同级的元素及网页排版。
• 因为浮动元素是脱离文档流的，父元素感知不到浮动元素的存在
• 解决办法：清除浮动：clear：both；将父元素设置成一个 BFC ；

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

1
2
3
4
5
6
7
8

.clearfix:after{        /*在class为clearfix的元素后面添加内容*/
content: '';        /*内容为空*/
display: block;     /*以块级元素显示*/
clear: both;        /*清除左右浮动*/
}
.clearfix{
*zoom: 1;         /*ie6、7浏览器，触发ie的hasLayout属性，清除浮动、清除margin的重叠等*/
}

• 在.clearfi添加一个伪类，在后面加入一个空内容，形成一个块级元素，并且清除浮动，zoom: 1;触发ie6、7的haslayout布局，ie6、7识别；
• after 在父元素里添加一个块级元素，clear：both；后该元素显示在浮动元素的最下面，父元素感知到此元素，因此能够包裹住它和它上面的浮动元素。
• 区别：清除浮动只是让父容器包裹住最下面的空内容块级元素，从而清除浮动对父容器及其相邻元素的影响。BFC是让父容器形成一个独立的布局空间，不受外部元素的影响。

代码

1、github链接

2、BFC撑开两栏布局
github链接