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.

你可能感兴趣的