CSS里的BFC

一、什么是BFC

BFC（Block Formatting Context）块级格式化上下文，指一个独立渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

二、BFC的特征

1、BFC区域的元素不会影响外面的元素

2、BFC区域不会与float元素发生重叠

3、计算BFC高度时，浮动元素能够撑开BFC的高度

三、如何创建BFC

1、设置overflow属性：hidden | auto| scroll（除了 visible 以外）

2、设置float属性：left | right（除了none以外）

3、设置display属性： inline-block | flex | inline-flex | table-cell | table-caption

4、设置position属性：absolute | fixed（除了static、relative以外）

5、根元素html

四、BFC的具体应用

根据BFC特点的特点，常用在以下场景

1、清除浮动

2、文字环绕图片

3、解决margin塌陷的问题