css怎么把多个块合并,CSS外边距合并&块格式上下文

前言

之前在前端开发的过程中，都没有遇到外边距合并的问题(其实是因为大多时候都直接用前端样式库(〃'▽'〃))，这一次需要动手排一个页面，也挺简单，但是遇到了一个奇怪的问题，所以学习记录一下。

问题

测试代码如下：

test

* {

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;

}

我是吃瓜群众

我是子div

我是父div

子div设置了margin-top之后，父div也跟着一起margin-top了。

原因如下：

Margin Collapsing 外边距合并

块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，或外边距合并。

外边距合并的3中基本原因：

1、相邻的元素

毗邻的两个兄弟元素之间的外边距会合并

2、块级父元素与其第一个/最后一个子元素

如果块级父元素中，不存在border, padding, inline part, block formatting context created, or clearance 来隔离第一个子元素的上边距，就会发送外边距合并现象。

如果块级父元素，不存在border, padd