inline-block BFC 边距合并

Posted 2020-08-24

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

首先，外边距的合并出现在垂直方向上，两个块级元素垂直外边距相邻时，两者的原外边距会合并成一个高度等于两者中较大的新外边距。

在正常的文档流下，没有边框，没有padding，但有外边距时，上下的margin会出现合并，高度等于两者中的较大者。

不让相邻元素外边距合并的方法：

• 加外边框，加padding；
• 父元素加overflow（不为visible）;
• 父元素加display:inline-block;
• 父元素加float;

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

overflow：auto|hidden会触发BFC，由于BFC可以包含浮动，故可以感知浮动元素的高度，所以可以撑开高度。

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

BFC（块级元素格式上下文）形成了一个独立的空间，空间内部不受外部元素影响。

如何形成BFC：

1.根元素

2.display：inline-block|table-cell|table-caption|flex|inline-flex;

3.position:absolute|fixed;

4.overflow:auto|hidden|scroll;

5.float:right|left|both;

有什么作用？

1.可以清除浮动，包含浮动元素；

2.不被浮动元素覆盖；

3.阻止外边距折叠。

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

由于浮动脱离文档流，浮动元素不会影响父元素的宽度，使父元素的高度为“0”，从而形成高度塌陷。

一般有两种解决办法：

1.用clear清除浮动；

2.使父容器形成BFC。 

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

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

 作用：清除浮动

给类选择器clearfix的元素添加一个伪类after，添加内容为空的块级元素，清除两边的浮动。

*zoom用来触发IE浏览器下的hasLayout，解决浏览器不兼容问题。

和BFC的区别：

通过伪类清除浮动元素，并不是父元素感觉到了子元素中的浮动元素，而是在后面添加了一个块级元素。而元素形成BFC，是因为元素感觉到了子元素中浮动元素的宽度，而不是通过添加元素撑开父元素。