mergin塌陷问题

当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。

	.box1{
	width: 200px;
	height: 200px;
	margin-bottom: 50px;
	background: yellowgreen;
	}
	.box2{
	width: 200px;
	height: 200px;
	margin-top: 30px;
	background: gray;
	}

例如这个代码，box1和box2之间设置了两个margin一个为50px一个为30px，那两个盒子之间的距离是100px吗？
不是。
两盒子之间的距离仅是50px，两盒子之间的margin出现了重叠部分，垂直之间塌陷的原则是以两盒子最大的外边距为准。
最重要的是：margin塌陷问题和合并问题都只对垂直方向有效

塌陷问题解决：

bfc–block format context 块级格式化上下文

每一个元素都是一个盒子，每一个盒子都符合一定的渲染规则。我们可以通过触发bfc方式，让特定盒子里的渲染规则发生变化。我们要给外层元素加一个特定属性来触发bfc来解决margin塌陷问题。触发bfc的方式有以下四种，我们可以根据实际的需求采用不同的方法。

1.overflow:hidden;

2.display:inline-block;

3.position:absolute;

4.float:left;