什么是BFC，如何触发BFC

1. BFC 特点（6）

- 内部的盒子会在垂直方向，一个接一个放置（针对块元素）;

- 盒子垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻盒子的 margin

会发生重叠（外边距上下取最大，会重叠）;

- 每个元素的左边边缘，与包含块的父盒子的左边缘相接触，即使存在浮动也是如此（子元素左边与父元素左边在一起）;

- BFC 的区域不会与浮动的盒子重叠（浮动元素紧贴浮动元素）

- BFC 就是页面上一个隔离的独立容器，容器里面的子元素不会影响外面的元素；

- 计算 BFC 的高度时，浮动元素也参与计算（解决高度塌陷后）;

2. 形成BFC 的条件（4）

- 浮动元素，float 除 none 以外的值;

- 绝对定位元素，position 属性取值为absolute,fixed 时;

- display 为 flex,inline-flex;inline-block,grid,inline-grid,table-cell,table-caption;

- overflow 除 visible 以外的值如 hidden，auto，scroll;