Margin塌陷和margin合并两个bug的处理方法

Margin塌陷和margin合并两个bug的处理方法

margin塌陷

现象：父子垂直方向上的margin 一起的 谁大取谁
正常情况：父级元素相对浏览器进行定位，子级相对父级定位
塌陷：子级不再相对于浏览器进行定位
解决方法：
1、给父级设置border/padding（不用）
2、触发bfc（block format context）
给父级的盒子添加
(1)position:absolute/fixed
(2)display:inline-block
(3)float:left/right;
(4)overflow:hidden

margin合并

现象：两个兄弟垂直方向上的margin是合并的
解决方法：
1、给box2加上一层父级元素并加上overflow：hidden
2、给两个都加一层父级再加bfc
两种方法都需要改变html结构，在实际开发中不能使用
实际解决：通过数学计算为上面的的margin-bottom多加距离