什么是块级格式化上下文

块级格式化上下文：全称Block Formatting Context (简称BFC)，它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局。 不同的BFC区域，它们进行渲染时互不干扰, 也就是说BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部

有哪些元素可以创建BFC呢？

1. 浮动和绝对定位元素
2. overflow不等于visible的块盒

BFC的作用：可以解决高度坍塌问题以及外边距合并问题

这么说可能还是有点抽象，我这里先给大家举个实例：

• [1] 首先准备好这样的盒子

• [2] 在其基础上给子盒子加上样式：margin-top:100px;
  我们发变成明明给子盒子加的：margin-top:100px,怎么变成好像是给父盒子加的一样 其实是外边距合并了

• [3] 只要我们给父盒子设置一个overflow:hidden;(BFC不会和它的子元素进行外边距合并)，overflow:hidden可以解决因为浮动而带来的高度坍塌问题，再就是我们网页用到的两栏布局，三栏布局(两边固定，中间自适)也是通过overflow:hidden;来实现的。