什么是BFC?

介绍

Block Formatting Context(格式化上下文，简称BFC) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
BFC通俗地来讲就是符合一些特性的HTML标签

特性

1. 内部的Box会在垂直方向上一个接一个的放置
2. 垂直方向上距离由margin决定
3. bfc的区域不会与float的元素区域重叠
4. 计算bfc的高度时，浮动元素也参与计算
5. bcd就是页面上的一个独立的容器，容器里面的子元素不会影响外面的元素

形成条件

1. 浮动元素，float除了none以外的值
2. 绝对定位元素，Position (absolute，fixed)
3. display为一下其中之一的值 : inline-block，table-cell,table-caption，flex。
4. overflow 除了visible 以外的值（hidden，auto，scroll）
5. body根元素

BFC B站视频教程