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

合并场景：
外边距合并指的是，当两个垂直边距相遇时，它们将形成一个外边距。只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

如何合并：

• 两个相邻的外边距都是正数时，合并取它们两者之间较大的值。
• 两个相邻的外边距都是负数时，合并取两者绝对值的较大值。
• 两个外边距一正一负时，合并取两者相加的和。

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

• 浮动元素不与任何元素产生外边距合并

• 创建了新的BFC的元素,给父元素创建了BFC，它的子元素的外边距不会折叠。

• inline-block 元素不与任何元素产生外边距合并

• 使用绝对定位的元素，不与任何元素发生外边距合并

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

父子外边距合并：

Paste_Image.png

如上图中，父元素上外边距是20px,子元素上外边距是40px,合并之后的上外边距是40px。

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

inline-block内缝隙

去除inline-block内缝隙的方法：

• 去除HTML内标签缝隙

• 标签换行，但是要保证标签相接的地方没有空格

• 设置负margin

• 使用浮动

• 将父容器设置font-size=0；此时子容器font-size需重新设置，这个是清除缝隙的最简单的方式

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

overflow的属性值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

BFC的定义：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

BFC的通俗理解：
首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

由此可见，当负容器设置属性overflow：auto|hidden会创建一个BFC，BFC是一个独立的空间，使其内部元素不受外界的影响。在这个独立空间内，块盒和行盒都会垂直的沿着其父元素的边框排列，所以高度就被撑开了。

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

概念：
首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

BFC的形成条件：

• display属性为：nline-block, table-cell,table-caption；
• overflow属性（visiable值除外）；
• 绝对定位absolute；
• float属性（none值除外）

作用：

• 阻止外边距合并
• 清除浮动或者文字环绕
• 用于布局

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

高度塌陷是指当父元素的height为0时，子元素设置浮动之后，它脱离当前文档流，所以它也无法撑开其父元素，造成父元素高度塌陷。
解决方法：

• 在父容器里加入height属性，该方法适用于子元素高度已知并且固定的情况
• 空元素设置clear属性

• 使用after伪类元素。对浮动元素增加伪类。（IE8以上生效，在IE6、7中可在父容器中增加overflow:auto;或者overflow:hidden等）

• 为父元素创建一个BFC

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

<pre>
.clearfix:after{ /在父元素上添加clearfix，使用该类的伪类：after/
content: ''; /伪元素的内容为空/
display: block;/表现为块状元素，因为行内元素不会撑开父元素/
clear: both;/清除两边浮动/
}
.clearfix{
zoom: 1;/IE专有属性，兼容IE6-8，参数设置为1的话，多用于清除浮动*/
}
</pre>

和BFC撑开空间的区别：
BFC形成的是一个内部的独立空间，内部元素的布局不受外部元素的影响，而上面的方法是通过利用父元素感知浮动元素的存在而把空间撑开，并没有形成独立的空间。

本文版权归本人及饥人谷所有，转载请注明出处