BFC margin重叠

BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

满足下列CSS声明之一的元素便会生成BFC。

1、根元素

2、float的值不为none

3、overflow的值不为visible  （这一条不知道为什么对于上下元素的时候不起作用。）

4、display的值为inline-block、table-cell、table-caption

5、position的值为absolute或fixed

margin重叠是发生在同一BFC内的块级元素

当发生重叠的时候：

1、当两个margin都是正值的时候，取两者的最大值；

2、当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；

3、当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。

如何解决重叠问题：

1、对于上下相邻的两个元素，只要把其中一个设置为display:inline-block。按理论来说，将其中一个设置为overflow:hidden，也可以达到消除重叠的效果，结果却没有，不知道为什么。

2、给父元素设置border或者padding，子元素的margin就不会与父元素重叠。例如margin-top。

给父元素设置    overflow: hidden或者display: inline-block或者float: left或者position: absolute，子元素的margin就不会与父元素重叠。

给子元素设置display: inline-block，子元素的margin就不会与父元素重叠。

3、当父元素没有设置宽高，子元素浮动的时候，会使得父元素高度塌陷，这时候只需要给父元素设置overflow: hidden或者display: inline-block或者float: left或者position: absolute。都可以解决这个问题。根本原因在于创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题

4、与浮动元素相邻的已生成BFC的元素不能与浮动元素相互覆盖。利用该特性可以作为多栏布局的一种实现方式。overflow: hidden或者display: inline-block或者float: left或者position: absolute。

.left{

      background:pink;

      float: left;

      width:180px;

    }

.center{

      background:lightyellow;

      overflow:hidden;

    }

 .right{

      background: lightblue;

      width:180px;

      float:right;

    }

外边距重叠解决：

  1.外层元素padding代替

  2.内层元素透明边框 border:1px solid transparent;

  3.内层元素绝对定位 postion:absolute:

  4.外层元素 overflow:hidden;

  5.内层元素 加float:left;或display:inline-block;

  6.内层元素padding:1px;