BFC

关于BFC

什么是BFC

BFC就是一个包含创建该上下文元素的所有子元素的区域

划重点：一个BFC区域只包含其子元素（亲儿子哦），不包括子元素的子元素

并且每个BFC区域都是相互隔绝互不影响的

需要满足什么条件的区域才叫BFC呢

body元素

设置浮动的元素，不包括none

设置定位的元素，absoulte和fixed

行内块显示模式的元素，inline-block

设置了overflow的元素，即hidden/auto/scroll

表格单元格，table-cell

设置了弹性布局的元素flex

BFC有什么用处

1、可以解决外边距塌陷问题

2、可以解决包含塌陷问题

3、可以清除浮动带来的影响

4、可以阻止标准流元素被覆盖

这些用法都是借助了BFC区域之间是相互独立的互不影响的特性