inline-block、BFC、边距合并

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

边距合并出现的场景

1. 元素自身外边距合并：盒模型包括 外边距→边框→内边距→内容 逐层包裹的结构，当元素没有内容，内边距，边框时候，垂直外边距就会相遇从而合并）。

2. 相邻元素外边距合并：相邻元素，上下边距如果相遇就会产生合并。

3. 父元素与子元素外边距合并：当没有边框或者内边距包裹的话，父子元素的垂直边距就会相遇 从而产生合并，只有普通文档流的块级框才会发生垂直外边距的合并，行内框，浮动框，和绝对定位框不会发生合并。

如何合并？

1. 两者为正的时候，取更大值

2. 一正一负的时候，取相加值

3. 两者为负时，取更小值

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

1. 让相邻元素处于不同的BFC中，形成各自的世界来隔绝相互的影响。

1.png

2. 让相邻元素嵌套在不同的父容器上，添加内边距或者边框来隔绝两者外边距的合并。

2.png

3. 转化为浮动，绝对定位框或者行内框（垂直外边距的合并只对普通文档流块级框才有效果）

3.png

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

1. 把元素写在一行紧挨着，这样浏览器就不会解析空格。
2. 使用浮动
3. 使用负边距

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

使用overfl:auto|hidden 都会形成BFC，从而拥有了自己的领域，而这个领域的高度，浮动元素一样是参与计算的，所以就撑开了高度。

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

BFC是什么

BFC(块级格式化上下文)，即一个独立的空间或者领域，内部元素与外部元素互不干涉

如何形成BFC

根元素（当我们初始在html里输入内容超过屏幕高度时会产生滚动条，符合形成BFC）
overflow（不为visible）
float ( 不为none )
position（fixed或absolute）
display:inline-block|table|table-cell|table-captaion|inline-flex|flex;
(以上都会形成BFC)
ie7及以下版本：*zoom:1;（触发haslayout）

有什么作用

BFC可以清除元素浮动外部元素的影响，撑开高度防止高度塌陷，也可以隔绝子元素和父元素的垂直外边距合并，当然相邻元素也可以。

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

浮动导致子元素脱离了正常的文档流，使父元素无法掌控从而导致高度的塌陷。

解决方法：

1. 父容器形成BFC建立自己的领域，从而获得控制权，孙悟空即使再牛逼也逃不过五指山
2. 清除浮动带来的影响，可以在父容器内添加额外的标签，然后清除浮动。或者利用伪类:after来清除浮动带来的影响，方法原理一样。

本篇文章版权归咸鱼和饥人谷所有，转载须说明来源