元素之间设置margin的影响及原因

在写网页布局时通常会遇见给元素之间设置margin无效或其他影响，所以简单记录下：

影响：

1.父子、兄弟元素间设置垂直方向上的margin时，margin会发生重叠，只选取最大值

2.父子元素之间，给子元素设置margin-top时，子元素会影响父元素，带动父元素下移，影响父元素位置

注意：margin带来的影响只会发生在块级元素之间，因为主要是垂直方向上的影响

原因：

BFC机制的规定：

W3C中指出：

在块格式化上下文中，框从包含块的顶部开始一个接一个地垂直排列。 两个兄弟框之间的垂直距离由'margin' 属性决定。块格式化上下文中相邻块级框之间的 垂直边距折叠。 两个相邻的BFC之间的距离由margin决定。 在同一个BFC内部，两个垂直方向相邻的块级元素的margin会发生“塌陷” 所以在包含关系中，想要避免margin影响，就让每一个元素都设为bfc

解决方案：

一、解决兄弟元素之间的margin重叠：

1.避免margin的重合，比如只给其中一个元素设置margin

二、解决父子这种包含关系的margin重叠：

1.避免margin的重合，比如只给其中一个元素设置margin

2.创建BFC（给父或子其中一个设置即可）

• float属性不为none
• overflow不为visible（可以是hidden、scroll、auto）
• position为absolute或fixed
• display为inline-block、table-cell、table-caption

关于BFC参考如下博文：

【CSS】深入理解BFC原理及应用 - 简书