子盒子margin-top失效問題的解決辦法

在布局中經常碰到在子div中設定margin-top值時失效的問題，怎麼解決呢?

<div class="box1">
	<div class="box2"></div>
</div>

<div class="box3">
	<div class="box4"></div>
</div>
           

.box1{
	width:100px;
	height:100px;
	margin-bottom: 20px;
	background: red;
	/*去掉border時box2的margin-top将失效；不建議這麼解決*/
	border: 1px solid blue;
}
.box2{
	width:50px;
	height:50px;
	background: pink;
	margin-top: 20px;
}

.box3{
	width:200px;
	height:200px;
	background: red;
	/*觸發BFC，margin-top生效*/
	overflow:hidden;
	/* float: left; */
	/* position: absolute; */
}
.box4{
	width:50px;
	height:50px;
	background: pink;
	margin-top: 20px;
}
           

BFC的了解：https://blog.csdn.net/fylxy000/article/details/107262200