问题描述：
最近在开发中偶然遇到了一个问题那就是如下图：父级元素是个空的最外层包裹元素，子元素是内容，想控制子元素不从页面顶端开始，就给子元素设置一个margin-top：50px;没想到父元素也随之下移了。我们只知道相邻元素如果既有margin-bottm又有margin-top会产生margin塌陷，但是这又是为什么呢？
原因探索：
解读规范可知：相邻两个元素的margin会折叠（相邻包括兄弟元素也包括抚子元素），但是仍需满足以下几个条件：
必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
*没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
*都属于垂直方向上相邻的外边距，可以是下面任意一种情况：
*元素的margin-top与其第一个常规文档流的子元素的margin-top
*元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
*height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom
解决办法：
根据以上原因分析可知，我们只需打破它合并的规则即可解决该问题：比如给子元素设置float/position属性使其脱离文档流，或者给父元素设置border／padding然后将其box-size属性设置为border-box/padding-box等等
网友评论