BFC（Block Formating Context）

BFC(Block Formating Context) ：块级格式化上下文，相当于一个盒子，起到隔离作用
规则：

1. BFC起隔离作用，内部元素不会受外部元素的影响。
2. 一个元素只能存在于一个BFC中，如果同时存在于两个BFC中，违反了BFC的隔离作用
3. BFC中元素按正常流排列，元素之间的间隔用margin控制
4. BFC不会于外面浮动的元素重叠
5. 计算BFC的高度，需要包括浮动子元素的高度

如何创建BFC：

1. 脱离文档流 float不为none
2. 定位position是absolute fixed relative
3. overflow不为visible （可以是hidden inherit auto scroll）
4. display是inline-block、table-cell、table-caption、flex、inline-flex
5. 根元素 html