CSS：BFC（Block Formatting Context 块级格式化上下文）
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
一、背景
想要了解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阻止元素被浮动元素覆盖 |
五、欢迎交流指正
六、参考链接