BFC（块级格式化上下文）

BFC是什么

BFC 是块级格式化上下文，是 W3C CSS2.1 规范中的一个概念。BFC 是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。BFC 是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。

BFC有什么特性

1. BFC是一个块级元素，块级元素在垂直方向上依次排列。

2. BFC是一个独立的容器，内部元素不会影响容器外部的元素。

3. 属于同一个BFC的两个盒子，外边距margin会发生重叠，并且取最大外边距。

什么元素会生成BFC

1. 根元素
2. 浮动元素（float值不为none）
3. 绝对定位元素（position值为absolute或fixed）
4. display为inline-block或table-cell或table-caption或flex或inline-flex的元素
5. overflow 值不为 visible 的元素

BFC的作用

1. 阻止上下margin重叠
2. 阻止被浮动元素覆盖
3. 解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题