解决margin塌陷的3种方法

初始HTML代码如下：

<div class="father">
	<div class="son">123</div>
</div>	

初始CSS代码如下：

.father {
	width: 200px;
	height: 200px;
	margin: 10px auto;
	background-color: pink;
}
.son {
	width: 100px;
	height: 100px;
	background-color: purple;
	margin-top: 10px; /*子元素设置margin-top，子元素与父元素之间并没有出现10px的上间距，称之为塌陷*/
}

初始效果图如下：

解决塌陷方法如下：

1. 父盒子添加border

.father {
	border: 1px solid #000;
}

效果图如下：

2. 父盒子添加padding

.father {
	padding: 1px;
}

3. 父盒子添加overflow触发BFC

.father {
	overflow: hidden;
}

效果图如下：