margin塌陷（又叫边距重叠效应） & BFC

问题：有时当我们设置子元素的margin-top，但是却发现子元素没有出现上外边距的效果，反而是父元素出现了上外边距的效果。第一个子元素设置margin-top父元素会跟着移动

原因：边距重叠：一个盒子和其子孙的边距重叠。根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。

    发生这一现象的有三种情况：

    相邻兄弟块元素间、

    父元素及其首子元素和末子元素间（没有内边距或边框把外边距分隔开）、

    空块级元素自身的合并。

解决方法：

1、为父元素设置padding。---要设置padding，设置margin不行

2、为父元素设置border。---设置border为0px不行，border要有值

3、为父元素设置 overflow: hidden 。

4、父级或子元素使用浮动或者绝对定位absolute

补充：

普通文档流盒子间，只要垂直外边距直接接触就会发生合并，合并后外边距视觉高度取两个发生合并外边距中较大者。

父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级。

同一个BFC中的box会发生margin坍塌（也叫margin重叠）现象，这里注意，说的是上下margin。

所以不同BFC的box不会发生margin坍塌现象。

在父子级嵌套中，若父级没有border/padding-top，也没有空标签清浮动，总而言之就是没有触发BFC的时候，此时只给自己设置margin-top,会传递给父级。为了避免margin坍塌现象，就要通过各种方式触发BFC。

触发BFC的几种方式：

1.overflow:hidden/auto/scroll;

2.position不是static也不是relative；

3.float不是none；

4.display是table-cell或inline.

什么是BFC:

BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。

BFC是页面CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。

BFC的一个最重要的效果是，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

利用BFC可以闭合浮动，防止与浮动元素重叠。