面试官：说说你对CSS中的margin合并问题的理解，以及怎么解决呢？
内心OS，你这问题也太经典了（老了）吧，这不我刚学css的时候都遇到过啊！这不手拿把掐🤗
我：margin合并就是相邻两个元素的外边距会合并，取其中的较大值，至于解决方案，可以设置盒子触发BFC即可。
面试官：你提到了相邻元素，有没有考虑到是兄弟相邻和父子相邻呢？BFC如何触发呢？哪种改动方式才是对整个布局影响最小的？
糟了，刚学的时候也没把这当回事啊，大致了解了一下就过去了，甚至都没敲几个示例，这下懵逼了···
了解一些概念
盒模型
首先需要了解下盒模型的特点：
- padding不能为负值，margin可以为负值。
- 背景色会平铺到padding、border区域(非margin区域)。
- margin合并现象：普通布局给盒子设置margin，相邻的元素的margin会合并（包括父子、兄弟等相邻元素）。
BFC
BFC全称Block Formatting Contexts(块级格式化上下文)，它是W3C CSS2.1 规范中的一个概念。它是一块独立渲染区域， 它规定了在该区域中，常规流 块盒 的布局。
具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。
满足以下条件之一的元素，即可触发创建BFC渲染区域：
- 默认根元素就会创建BFC区域，意味着元素创建的BFC区域覆盖了网页中所有的元素。
- 设置float，并且值不为none 的块盒。
- 设置position，并且值不是static或relative 的块盒。
- 设置display，并且值是inline-block、table-cell、flex、table-caption或者inline-flex 的块盒。
- 设置overflow，并且值不是visible 的块盒。
比如上图中根元素创建的BFC，会影响元素A、C、E、F、G的排列布局
父子元素Margin
父子元素之间的Margin合并情况：
- 如果父元素没有设置margin，那么子元素的margin会传递给父元素，导致父元素也会出现margin偏移效果：
- 如果父元素也有margin，那么父子元素会合并margin，取其中最大值：
解决方案：有两种方式解决父子元素Margin问题：
一、给父元素盒子设置BFC，就可以让子元素布局不会影响到外面。比如给父元素设置overflow: hidden;或display: flex;等，一般创建BFC用的是overflow: auto/hidden/scroll，这是对布局影响最小的。
二：让父子元素之间产生缝隙即可，只要父子元素之间不紧挨着，那么父子元素的Margin就不会接触到一起合并。 可以给父元素设置border或padding，比如border: 1px solid transparent; 或 padding: 1px;，但是一般来说不设置border，影响到样式。最简单的方式就是父padding子margin。
兄弟元素Margin
兄弟相邻之间的margin，直接取margin-top和margin-bottom之间的最大值： 
但是注意，父子、兄弟相邻元素的margin合并问题解决方式不一样，兄弟元素只能通过设置其中一个兄弟元素display: inline-block/inline-flex/inline-grid。
或者利用BFC规则，给其中一个元素套一个父元素，给父元素都设置BFC；或者给两个元素都套一个父元素，都设置BFC。但这种就利用BFC方式影响就更大，少用。
总结
父子、兄弟相邻元素的margin合并问题解决方式不一样，父子可以通过设置父元素为BFC，或直接添加border、padding让父子之间有缝隙即可，一般都是父padding子margin；兄弟元素一般通过设置其中一个兄弟元素display: inline-block/inline-flex/inline-grid。
在现代布局flex和grid中，是默认自带BFC规范的，所以可以解决非BFC盒子的一些问题，这就是为什么flex和grid能成为更好的布局方式原因之一。