外邊距疊加問(wèn)題
當(dāng)兩個(gè)外邊距相遇時(shí)(中間沒(méi)有border、padding等)
凡是未形成塊級(jí)格式化上下文(BFC)的盒子。均會(huì)與相鄰的盒子產(chǎn)生外邊距疊加的效果

BFC形成條件
1.float
2.position：absolute/fixed
3.inline-block/table-cell/table-captions(display: table也會(huì)有清除浮動(dòng)效果，但是不是形成了bfc)
4.block元素+overflow

BFC的特點(diǎn)
1.阻止外邊距的疊加(外邊距不會(huì)與其他盒子疊加)
2.BFC邊框(或者隱形邊框)不能與它內(nèi)部的元素外邊框重疊
3.可以包含浮動(dòng)

清除浮動(dòng)
利用bfc或者偽元素 + clear: both

水平垂直居中
1.利用display: table-cell屬性
2.利用行內(nèi)元素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.利用行內(nèi)元素+父元素line-height = height