margin塌陷问题的理解和原理

margin塌陷是什么？为什么会出现margin塌陷？解决margin塌陷的原理是什么？

1. margin塌陷是什么
   1. 兄弟盒子的塌陷，在标准的文档流中，竖直方向（水平方向不会出现塌陷）的margin会出现覆盖现象，即两个兄弟盒子之间，较大的margin会覆盖掉较小的margin，这是一种塌陷现象。
   2. 嵌套盒子的塌陷，如果你想让里面嵌套的小盒子上边距向下调整时，如果不加任何样式设置的话， 当给里面子元素设置向下边距时，它就会“穿透”外面的父级元素，使其带动父元素会一起向下移动，那么这样就造成了margin塌陷的问题。
2. 解决margin塌陷的原理
   1. 触发BFC（Block Fotmatting Context），块级格式化上下文

margin塌陷的解决方法

1. 给父元素添加一个边框，可以设置为透明色（transparent）
2. 给父元素添加一个超出隐藏overflow：hidden
3. 给父元素添加固定定位（绝对定位、浮动也可以）position：fixed（原理是脱离标准流）
4. 给父元素添加一个行内块样式布局display：inline-block
5. 给子元素的margin属性改为父元素的padding属性
6. 相邻的兄弟盒子给下面的盒子添加超出隐藏overflow：hidden