什么是BFC？BFC的触发条件？BFC能解决什么问题？

什么是BFC？BFC的触发条件？BFC能解决什么问题？

---

BFC定义

问题：什么是BFC？

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

BFC触发条件（任意条件都成为BFC）

问题：BFC触发条件？

1. body根元素
2. 设置浮动，不包括none
3. 设置定位，absoulte,fixed
4. 行内块显示，inline-block
5. 设置overflow,即hidden,auto scroll
6. 表格单元格table-cell
7. 弹性布局 flex

利用BFC来解决问题

常见的几种问题如下：

1. 解决外边距的塌陷问题（垂直塌陷）
2. 当浮动产生影响的时候，利用BFC清除浮动影响
3. 利用BFC解决包含塌陷
4. BFC可以阻止标准流元素被浮动元素覆盖

---

---

总结

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

并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。

不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响。