BFC 块级格式上下文

什么是BFC #

BFC 全称为块级格式化上下文 (Block Formatting Context) 。BFC是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。可以说BFC就是一个作用范围，把它理解成是一个独立的容器，并且这个容器里box的布局与这个容器外的box毫不相干。

触发BFC的条件 #

• 根元素或其它包含它的元素
• 浮动元素 元素的float不是none
• 绝对定位元素（元素具有position为absolute或fixed）
• 内联块（元素具有display：inline-block）
• 表格单元格 (display: table-caption)
• 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
• 具有overflow 且值不是 visible 的块元素
• dispaly: flow-root
• column-span: all
• 多列容器 元素的 column-count 或 column-width 不为 auto
• 弹性盒（flex或inline-flex）
• contain 值为 layout、content或paint
• 网格元素 display 为 grid 或 inline-grid

BFC的约束规则 #

• 内部的盒子会在垂直方向一个接一个排列
• 处于同一个BFC中的元素相互影响，可能会发生外边距重叠
• 每个元素的margin box的左边， 与容器快 border box都的左边相接触
• BFC就是页面上的一个隔离的独立容器， 容器里面的子元素不会影响到外面的元素，反之亦然
• 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素都要参与计算
• 浮动盒区域不叠加到BFC上

BFC解决的问题 #

• 垂直外边距重叠的问题
• 去除浮动
• 自使用两列布局