inline-block BFC 边距合并

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了inline-block BFC 边距合并相关的知识,希望对你有一定的参考价值。

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

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

在正常的文档流下,没有边框,没有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,是因为元素感觉到了子元素中浮动元素的宽度,而不是通过添加元素撑开父元素。

以上是关于inline-block BFC 边距合并的主要内容,如果未能解决你的问题,请参考以下文章

边距重叠以及解决方案BFC

边距重叠以及解决方案BFC

利用BFC特性实现两栏自适应

为啥 display:inline-block 可以防止边距崩溃? [复制]

为啥以边距 0 自动居中适用于 display:block 但不适用于 display:inline-block ?

BFC