什么是BFC? 如何创造一个BFC?

[tiantingrui]

BFC

理解BFC

BFC 就是一个作用范围，可以把它理解成是一个 独立的容器。注意这个 “独立”，它意味着这个作用范围和外界是毫不相关的。

BFC特性（BFC能解决什么问题，能够用于什么场景）

BFC主要被用来解决以下常见的布局问题：

1. 清除浮动
2. 阻止 margin 发生重叠
3. 阻止元素被浮动的元素覆盖

常见的创建BFC的方法

1. float的值不是 none
2. position 的值不是 static 或者 relative
3. display 的值是 inline-block、table-cell、flex、table-caption 或者 inline-flex
4. overflow 的值不是 visible