margin重叠和 BFC

有些东西回过头来再看,都会有不同的理解,当然这是因为当初没有理解清楚,哈哈。

对于上下 margin 重叠

先给出解决方案:

  1. 在开发的时候尽量用同一方向的margin,比如都设置为top或者bottom
  2. 为元素设置浮动、inline-block或者absolute 来消除 margin 重叠。

    BFC 不是使得 margin 不重叠的方法,毕竟 overflow 也会触发 BFC, 但是子元素依然重叠, 只是设置了 overflow 的父元素不会与子元素重叠。恰恰相反,触发了 BFC 的元素得子元素还会触发 margin 重叠,而不是消除。

触发BFC:

  1. float 除了none以外的值
  2. overflow 除了visible 以外的值(hidden,auto,scroll )
  3. display (table-cell,table-caption,inline-block, flex, inline-flex)
  4. position值为(absolute,fixed)
  5. fieldset元素

BFC特性:

  • 内部的Box会在垂直方向,从顶部开始一个接一个地放置。
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
  • 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  • BFC的区域不会与float box叠加。
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
  • 计算BFC的高度时,浮动元素也参与计算。

这是一个子集的关系。

最主要的是要把 BFC 浮动 margin重叠 这几个概念给分开,区分清楚。

回顾下 BFC