CSS基础 margin塌陷问题以及解决 办法

场景：两个相互嵌套的块级元素，父子元素相互紧贴margin-top会合并作用在父元素的子元素
结果：导致两个盒子同时移动

 

解决方法：

   1.给父元素设置overflow：hidden

   2.给父元素设置浮动       /* float:left */

   3.将父元素转为行内块元素  /*display:inline-block*/

 

 

注意：1.在行内元素中垂直方向的margin和padding是无效使用的
     2.如果两个盒子（块元素），子盒子不设置宽度使用的父元素的宽度，设置margin和padding是不会撑大盒子的