外边距叠加问题
当两个外边距相遇时(中间没有border、padding等)
凡是未形成块级格式化上下文(BFC)的盒子。均会与相邻的盒子产生外边距叠加的效果

BFC形成条件
1.float
2.position：absolute/fixed
3.inline-block/table-cell/table-captions(display: table也会有清除浮动效果，但是不是形成了bfc)
4.block元素+overflow

BFC的特点
1.阻止外边距的叠加(外边距不会与其他盒子叠加)
2.BFC边框(或者隐形边框)不能与它内部的元素外边框重叠
3.可以包含浮动

清除浮动
利用bfc或者伪元素 + clear: both

水平垂直居中
1.利用display: table-cell属性
2.利用行内元素vertical-align: middle + 伪元素height: 100%

.demo-outer {
  width: 800px;
  height: 800px;
  margin: auto;
  text-align: center;
  border: 1px solid #000;
}
.demo-outer:after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
.demo-inner {
  display: inline-block;
  vertical-align: middle;
}

3.利用行内元素+父元素line-height = height