CSS：BFC（Block Formatting Context 块级格式化上下文）

一、背景

想要了解BFC的规则，必须是熟悉前端网页的多种布局手段，例如盒的显示模式display，三种布局手段标准流(normal)、浮动流(float)、定位流(position)等。只有熟练掌握了这些布局方法之后，才能很好的理解BFC。

序号	名称	理解
1	普通流(normal)	1、元素按照其在HTML中的先后位置至上而下布局 2、行内元素水平排列，直到当前行被占满然后换行，块级元素则会被渲染为完整的一个新行 3、所有元素默认都是普通流
2	浮动流(float)	元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或向右边偏移
3	定位流(position)	元素会整体脱离普通流，因此决定定位元素不会对其兄弟元素造成影响

二、定义

BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中，是这么介绍BFC的。

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

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

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

三、触发BFC的条件

并不是任意一个元素都可以被当做BFC，只有当这个元素满足以下任意一个条件的时候，这个元素才会被当做一个BFC。

触发BFC的条件
序号	条件	详细
1	body/html	根元素
2	浮动元素	元素float不是none
3	决定定位元素	元素的position为absolute或fixed
4	display	display为inline-block、table-cell、table-caption、table、table-row、table-group、table-header-group、table-footer-group、inline-table、flow-root、flex、inline-flex、gird、inline-gird
5	overflow	overflow值不为visible、clip以外的值都可以
6	contain	contain值为layout、content、paint的元素
7	多列容器	元素的column-count或column-width不为auto，包括column-count为1

四、利用BFC解决问题

在你明白了解BFC的触发规则之后，那么就需要利用BFC的特点来解决我们在布局中遇到的一些问题了，还记得我们之前说过，BFC有一个特点是：每一个BFC区域都是相互独立，互不影响的。

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

五、欢迎交流指正

六、参考链接

BFC是什么？10 分钟讲透BFC 原理