简述BFC

一、是什么？

BFC（Block Formatting Context）直译为“块级格式化范围”。

可以把BFC理解成是一个独立的容器，并且容器里的布局，与容器外互不影响。

二、怎样创建BFC？

当一个CSS元素满足下面条件的任何一点，都可以创建BFC

1、float的值为right和left。

2、overflow的值不为visible。

3、display的值为table-cell, table-caption, inline-block。

4、position的值为absolute或fixed。

三、有什么用？

a、让浮动元素之间不能重叠

如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，此时需要给没有浮动的元素创建一个BFC就行了，比如加一个：display：inline-block；。

b、清除元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式。

c、解决上下相邻两个元素重叠

把两个容器分别放在两个据有BFC的包裹容器中就行了，上下元素就不会重叠了。