BFC（块级格式化上下文）

BFC是Block Formatting Contexts缩写

Block 说明只针对块级元素
Formatting Contexts 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

通俗讲BFC就是页面上独立的一块渲染区域，只有块盒子参与，这个区域不受外界样式的影响，决定了子元素如何布局。

什么时候才需要BFC呢，但凡写css，就会需要BFC，那BFC解决了什么问题呢？.

BFC的特性

1. 属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
2. 计算BFC高度时浮动元素也参于计算（重点）
3. BFC的区域不会与浮动容器发生重叠（重点）
4. BFC内的容器在垂直方向依次排列
5. 元素的margin-left与其包含块的border-left相接触
6. BFC是独立容器，容器内部元素不会影响容器外部元素
   注：其中1、2、3需重点理解，其特性和功能下面将用代码逐个演示；
   4、5、6为基本现象，按字面意思理解即可，不做重点说明。

如何触发BFC

1. 根标签HTML就是一个BFC
2. 浮动元素：float的值不是none
3. 绝对定位元素：absolute、fixed
4. display：inline-block、flex、table
5. overflow：值不为visble
   注意：不同触发机制解决不同问题，比如overflow:hidden解决不了inline-block的BFC问题

解决的问题

1. 外边距塌陷
2. 清楚浮动
3. 防止文字环绕图片排列
4. 盒子宽高自适应