css-doc

margin塌陷BFC

这是margin塌陷的几种情况之一，另外的你可以google其他几种情况。我在这里说一种情况，即楼主所遇到的情况：父子级margin。

• BFC
  首先大概说一下BFC。box的上下间距是有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.