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;
