同时给两个兄弟/父子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)浮动