问题
Margin Collapsing 外边距合并
Block Formatting Context 块格式化上下文
解决方案
参考
前言
之前在前端开发的过程中，都没有遇到外边距合并的问题（其实是因为大多时候都直接用前端样式库(〃‘▽‘〃)），这一次需要动手排一个页面，也挺简单，但是遇到了一个奇怪的问题，所以学习记录一下。
问题
测试代码如下：
<!doctype html><html class="no-js" lang=""><head> ???<meta charset="utf-8"> ???<meta http-equiv="x-ua-compatible" content="ie=edge"> ???<title>test</title> ???<meta name="description" content=""> ???<meta name="viewport" content="width=device-width, initial-scale=1"></head><style>* { ???margin: 0; ???padding: 0;}body { ???max-width: 750px; ???margin: 0 auto;}.div1 { ???background: yellow; ???height: 200px;}.div2 { ???background: blue; ???height: 200px;}.div2Child { ???background: red; ???height: 100px;}</style><body> ???<div class="div1">我是吃瓜群众</div> ???<div class="div2"> ???????<div class="div2Child" style="margin-top: 50px">我是子div</div> ???????<p style="color: white">我是父div</p> ???</div></body></html>
子div设置了margin-top之后，父div也跟着一起margin-top了。
原因如下：
Margin Collapsing 外边距合并
?块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，或外边距合并。
外边距合并的3中基本原因：
1、相邻的元素
毗邻的两个兄弟元素之间的外边距会合并
2、块级父元素与其第一个/最后一个子元素
- 如果块级父元素中，不存在border, padding, inline part, block formatting context created, or clearance 来隔离第一个子元素的上边距，就会发送外边距合并现象。
- 如果块级父元素，不存在border, padding, inline content, height, min-height, ?max-height来隔离下边距，则会和最后一个子元素合并。
3、空块元素
如果存在一个空的块级元素，不存在 border、padding、inline content、height、min-height来隔离上下外边距，那么它的上下外边距将会合并。
- 当都为正数时，取两者中较大者。
- 当都为负数时，取绝对值较大者。
- 当一正一负时，取相加之和。
- 外边距设为0时，这些规则也仍旧生效。
BFC（Block Formatting Context 块格式化上下文）与元素外边距合并 :
- 当两个元素属于不同的BFC时，这两个元素的外边距不会合并。
- 但在同一个BFC内，两个相邻元素的外边距仍会合并。
Block Formatting Context 块格式化上下文
?一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒模型出现的区域，也是浮动元素与其他元素进行交互的区域。
一个块格式化上下文由以下之一创建：
- 根元素或一些包含它的元素
- 浮动元素 (元素的 float 不是 none)
- 绝对定位元素 (元素的 position 为 absolute 或 fixed)
- 内联块 (元素具有 display: inline-block)
- 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
- display隐式创建的匿名表格列，包括table, table-row, table-row-group, table-header-group, table-footer-group (这些都是html的默认样式), or inline-table
- 具有overflow 且值不是 visible 的块元素，
- display: flow-root
- flex 项目
- grid 项目
- 多列容器（column-count 和 column-width 不是 auto, 包括 column-count: 1的元素）
- column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
解决方案
知道了问题原因所在，以及了解了相关原理，就很好办了。
1、给div2设置border
为了不改变div2的大小，还需将设置 box-sizing为border-box将padding和border包含在定义的width和height之内
.div2 { ???background: blue; ???height: 200px; ???border-top: 1px solid transparent; ???box-sizing: border-box;}2、去掉div2Child的margin，改为设置div2的padding
.div2 { ???background: blue; ???height: 200px; ???padding-top:50px; ???box-sizing: border-box;}3、div2设置为内联元素
.div2 { ???background: blue; ???height: 200px; ???display: inline-block; ???width: 100%;}4、清除浮动
所有浮动元素包含在div2内，增加样式clearfix
.clearfix::before, .clearfix::after{ ???overflow: hidden; ???display: table; ???visibility: hidden; ???content: ‘‘; ???clear: both;}或者创建一个新的BFC，使其在不同的上下文中，不合并外边距。
5、给div2设置Position
.div2 { ???background: blue; ???height: 200px; ???position: absolute; ???width: 100%; ???max-width: 750px;}6、给div2设置float，注意后面的元素需要clear浮动
.div2 { ???background: blue; ???height: 200px; ???float: left; ???width: 100%;}7、给div2设置display
.div2 { ???background: blue; ???height: 200px; ???display: inline-block; ???/*display: table;*/ ???width: 100%;}8、给div2设置flex
.div2 { ???background: blue; ???height: 200px; ???display: flex; ???flex-direction: column;}万变不离其宗
参考
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
CSS外边距合并&块格式上下文
原文地址：http://www.cnblogs.com/leestar54/p/8087679.html