margin上下重叠bug?

margin上下重叠bug?

1：说明：margin是在元素边框以外的外边界区。
在标准盒模型中，盒模型由以下几部分组成：
content（内容区）+padding（填充区）+border（边框区）+margin（外边界区）
如下图所示：
2：作用：控制同辈元素之间的位置关系。

3：margin属性的书写方式：
margin：0px 0px 0px 0px；四个值分别按照上右下左的顺时针顺序依次表示各个方向的外边界数值。
margin：0px 0px 0px ；三个值分别代表上边界、左右边界、右边界的值。
margin：0px 0px ；两个值分别代表上下边界、左右边界的值。
margin：0px；一个值代表上下左右边界的值。
此外margin的其他书写方式有：margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px;

4：margin属性的使用方法：
（1）margin：0 auto；表示元素外边界上下为0，左右为auto表示自由显示即居中显示，可以使元素居中显示。
（2）margin-left：auto；margin-right：auto；同时写这两个属性可以使元素水平居中。
注：margin可以写负值。

margin的bug
margin的bug：根据BFC的布局规则有：box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会重叠，按照最大值进行显示。
如下图所示：


理论上我们为上下两个块状元素添加四个方向的margin值后，应像左边的图一样，上下的margin值相加显示，但实际上我们显示出来的则是右边的样子，两个margin值会重叠，且以最大值进行显示。这就是margin上下重叠的bug。
解决方法：
（1）：给父元素添加overflow：hidden；使其变成两个独立的BFC，margin值就不会重叠了。
（2）：给父元素和子元素添加浮动属性，触发其BFC属性，使margin值不进行重叠。
（3）：给父元素添加边框。
（4）：把添加的margin外边界改为padding填充值。