解决margin合并问题

一、什么是外边距合并

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

所谓的外边距合并就是，当两个垂直外边距相遇时，它们将形成一个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。

二、发生合并的三种情况及解决办法

1. 两个元素是兄弟关系：

解决办法：

• 可以直接改变其中一个的外边距的值，使之达到想要的效果。(推荐使用)
• 使用BFC：将兄弟元素分别作为子元素放在块级元素内，然后将其父级元素的渲染规则该为BFC。(不推荐使用,会破坏HTML文档结构)

2. 两个元素是父子关系

当没有内容（padding、border、行内元素）将父元素与子元素分开时，就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。

情形1:



情形2: 父元素没有margin-top，子元素设置margin-top，父子元素整体下移



解决办法：

• 可以通过给父元素添加边框或内边距.(不建议使用,会破坏布局)
• 使用BFC解决: 将父元素的渲染模式改为BFC渲染模式。

3. 一个空元素，没有边框和填充

如果这个外边距遇到另一个元素的外边距，还会发生合并：

PS：只有普通文档流中块级元素（block）的垂直外边距才会发生外边距合并。行内框，浮动框或绝对定位之间的外边距不会合并。

解决办法：

• 使用BFC

三、BFC是什么,如何触发BFC.

1. FC

Formatting context(格式化上下文)是W3C 规范中的一个概念.

它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素如何定位,以及和其他元素的关系和相互作用.

2. BFC

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

3. 触发BFC的方法

只要满足以下任意一条件,将会触发BFC.

• body根元素
• 浮动元素：float：除none以为的值
• 绝对定位元素：position：absolute/fixed
• display：inline-block/table-cells/flex
• overflow：除了visible以外的值（hidden/auto/scroll)

ps: 对于使用哪种触发BFC的方式，来解决外边距合并的问题，考虑使用哪种触发BFC的方式，对布局不产生影响。