css外边缘塌陷 解决办法（含BFC）

同时给两个兄弟/父子div设置上下边距20px，逻辑上是40px，实际塌陷成20px

https://www.bilibili.com/video/BV1DE41197Kc?from=search&seid=13391069951883524042

发生在：垂直方向 、块级元素 （行内元素无法设置垂直方向的外边距）

计算：同为正数或者负数时，为绝对值最大的数

           一正一负时，为和

父子div的解决办法：

    对父元素:

1）添加边框

2）添加内边距

3）overflow: hidden; 触发BFC

    BFC属于普通文档流，触发了BFC的元素可以看作一个隔离了的独立容器，是不会影响到其他元素的一种属性

    BFC的作用：

            1.避免外边距重叠

            2.清除浮动

            3.阻止元素被浮动元素覆盖

    https://www.bilibili.com/video/BV1aZ4y1M7gW?from=search&seid=16876326001253141430

    对子元素：

1）display: inline-block  设置子元素为行内块级元素     

2）overflow: hidden;  

3）相对定位

4）浮动