CSS两个经典BUG--margin塌陷与margin合并

margin塌陷问题

现象

先上示例代码

<div class="warpper">
			<div class="box"></div>
</div>

* {
	padding: 0;
	margin: 0;
}

.warpper {
	height: 200px;
	width: 200px;
	background-color: gray;
}

.box {
	height: 100px;
	width:100px;
	background-color: green;
}

两个嵌套的盒子如下所示

给嵌套在里面的子元素盒子摄设置一个margin-top值，我们的设想是子元素会相对于父元素向下移动，但是效果与我们想的却不太一样。

我们看到子元素是相对于浏览器的顶端向下移动了，仿佛父元素没有顶一样，这种现象我们就称之为margin塌陷。

解决方案

1. 给父元素设置border。这种方法可以解决问题，但是在实际开发中不推荐，因为这样会破坏页面的样式；
2. 使用bfc来解决。触发bfc有以下几种方式：
   float的值不为none