margin-top不起作用？？？

首先我们来看案例

 设置两个div嵌套，给里面的div加margin-top，目的是想让里面的div距离外边的div有50px的距离，但是运行看

结果却是外边的div往下挪了50px，可以说父元素塌陷了或者说子元素击穿了父元素

那么解决这个问题有三种方法：

1.给父元素加边框  border: 1px solid #000;

看结果

但是加边框后会使父元素变大，需要设置box-sizing: border-box;将内容盒转换成边框盒

2.给父元素设置overflow：auto;

设置overflow: auto;会触发BFC(Block formatting context块级格式化上下文)，它是页面上独立的渲染区域，它所有的样式都不会影响带外面的元素

3.将子元素设置成行内块标签display: inline-block;

 建议使用第二种方法。