css学习笔记：解决margin塌陷问题

.wrapper {
	width: 100px;
	height: 100px;
	background: #666;
}
.content {
	height: 50px;
	width: 50px;
	background: #0f0;
	margin-left: 50px;
	margin-top: 50px;
}
<div class="wrapper>
	<div class="content"> </div>
</div
问题描述： 此时margin-top:50px并没有达到想要的效果，实际效果确实他会带着他的父级元素一起向下50像素，该现象就是margin塌陷引起的
解决办法：
			1、给父元素设置border-top会解决此问题（不建议使用，设置border会影响父元素的高度）
			2、通过bfc(block format context)改变父元素盒子模型规则，触发bfc的属性有(借鉴网上方法)：
				1)、float的值不是none。
				2)、position的值不是static或者relative。
				3)、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
				4)、overflow的值不是visible