css外边距合并问题

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

问题出现

1. 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

    

        内容区域1
    

    

        内容区域2
    

![margin-buttom与margin-top合并][图片上传中...(微信截图_20210119095046.png-b7f9c6-1611021057878-0)]

2. 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开，也没有文字内容时），它们的上边距或下外边距也会发生合并。

margin-top合并

外边距合并的意义

可以让段落之间的距离一致。

以由几个段落组成的典型文本页面为例。

第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

外边距合并意义

注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

解决办法（触发bfc）

bfc：“block format context” ，简称，块级格式化上下文。

设置bfc后，特定的盒子会遵循另一套语法规则。简单的说，就是bfc能改变盒子的语法规则。

如何触发一个盒子的bfc？

• 设置为绝对定位（position:absolute; ）

    

        内容区域1
    

    

        内容区域2
    

处理问题1

处理问题2

以下情况类似

• 设置为行级块元素（display:inline-block; ）

• 设置为浮动元素（float:left/right;）

• 设置为溢出部分隐藏（overflow:hidden; ）

总结：处理bug漏洞，只能弥补，不能完全解决。

总的来说，触发bfc是可以弥补margin合并问题，但虽然弥补了margin合并问题，触发bfc之后却会引发更多问题。

因此，margin合并问题，一般不需要去弥补解决。

面试题

1.bfc是什么？应用场景？

含义：

• bfc：“block format context” ，简称，块级格式化上下文。bfc是web页面css视觉渲染的一部分，用于决定块盒的布局及浮动相互影响范围的一个区域。

• bfc是一块独立渲染的区域，它规定了内部block-level box如何布局，并且与这个区域外部毫不相干。通俗讲就是，bfc中的内部元素无论如何布局，都会在里面，不会影响外部区域。

应用场景：

• 1.清除浮动
• 2.解决margin合并问题

触发bfc方式：

• 设置为绝对定位（position:absolute; ）或固定定位（position:fixed; ）

• 设置为行级块元素（display:inline-block; ）或（display:flex / flow-root / table-cell;）

• 设置为浮动元素（float:left/right;）

• 设置为溢出部分隐藏（overflow:hidden; ）

bfc的特性：

• 1.内部的box会在垂直方向上一个接一个的放置。
• 2.垂直方向上的距离由margin决定。
• 3.bfc区域不会与float元素区域重叠。
• 4.计算bfc的高度时，浮动元素也参与计算。
• 5.bfc就是页面上的一个独立容器，里面的子元素不会影响外面的元素，外面的元素也不会影响里面的内容。

2.什么是外边距重叠？重叠的结果是什么？

含义：

外边距重叠指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的最大高度。

作用：

可以使得段落之间的距离一致。

外边距不会重叠的情况：

• 水平的margin永远不会重叠。
• 设置了overflow属性（visible除外）的元素和它的子元素之间的margin不会重叠。
• 设置了绝对定位（position:absolute;）的盒模型，垂直margin不会重叠，和子元素之间也不会重叠。
• 设置了display：inline-block的元素，垂直的margin不会重叠，和子元素之间也不会重叠。
• 根元素（如html）与body的margin不会重叠。