两个经典Bug及其解决方法

1. margin塌陷：当父元素包裹着子元素时，垂直方向的margin取两者之中较大的数值。
   解决方法：
   1.给父元素设置一个border-top（不建议采用）
   2.bfc（block format context — 块级格式化上下文）

如何触发一个盒子的bfc：
1.position: absolute;
2.display: inline-block;
3.float: left / right;
4.overflow: hidden; （隐藏溢出部分）

利用bfc改变父元素渲染规则，针对需求选取4种触发bfc的方法解决塌陷问题
2. margin合并：两个兄弟元素垂直方向上的margin会合并，margin会取两者之中较大的值。
解决方法：给其中一个或两个元素都增加一个父级，并用bfc改变父级元素的渲染规则（一般允许存在margin合并，可用计算方法实现所需效果）