margin collapse:边界 折叠/重叠/坍塌
此种现象只会垂直方向并且要满足一定条件时才会出现这种现象。
https://tech.youzan.com/css-margin-collapse/
在CSS中,两个或多个毗邻的普通流中的盒子(可能是父子元素,也可能是兄弟元素)在垂直方向上的外边距会发生叠加,这种形成的外边距称之为外边距叠加。
我们可以注意定义中的几个关键字:毗邻
、两个或多个
、垂直方向
和普通流
。
外边距叠加存在两种情况:一是父子外边距叠加;二是兄弟外边距叠加。
从定义中我们可以很清楚的知道要符合哪些情况才会发生外边距折叠:
- 都属于普通流的块级盒子且参与到相同的块级格式上下文中
- 没有被
padding
、border
、clear
和line box
分隔开 - 都属于垂直毗邻盒子边缘:
- 盒子的
top margin
和它第一个普通流子元素的top margin
- 盒子的
bottom margin
和它下一个普通流兄弟的top margin
- 盒子的
bottom margin
和它父元素的bottom margin
- 盒子的
top margin
和bottom margin
,且没有创建一个新的块级格式上下文,且有被计算为0的min-height
,被计算为0或auto
的height
,且没有普通流子元素
- 盒子的
形成 BFC 的条件(符合以下任一条件即可):
1) float 的值不为 none;
2) overflow 的值不为 visible;
3) display 的值为 table-cell、table-caption 和 inline-block 之一;
4) position 的值不为 static 或 relative 中的任何一个;
3. BFC 常见作用
https://blog.csdn.net/qq_33435265/article/details/54705946