BFC原理及作用

1、定义

BFC - Block Formatting Context 块级格式化上下文。

官方介绍：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素。

2、重点理解

每个BFC区域只包括其子元素，不包括其子元素的子元素。

每个BFC区域都是独立隔绝的，互不影响。

3、触发BFC的条件

①body根元素

②设置浮动，不包括none

③设置定位，absolute或者fixed

④行内块显示模式，inline-block

⑤设置overflow，hidden、auto、scroll

⑥表格单元格table-cell

⑦弹性盒布局flex

4、BFC的作用

1. 解决外边距的塌陷问题（垂直塌陷，把两个盒子放到两个BFC区域中）
2. 解决包含塌陷问题（父子关系的盒子，将父盒子变成独立的区域）
3. 当浮动产生影响时，可以利用BFC来清除浮动的影响（使用BFC将所有浮动元素包裹起来）
4. BFC可以阻止标准流元素被浮动元素覆盖