谈谈 CSS 中的 BFC。

[CodeRookie262]

[CodeRookie262]

BFC 是 Block Formatting Context 的简称，也就是块级格式化上下文。

都知道文档流是自上而下，从左到右排版的，但是很多情况下我们不得不让某些“盒子”脱离文档流来实现我们的需求，由此我们需要脱离文档流，脱离文档流的方式有浮动以及定位。但是脱离文档流后就意味着他们在正常的文档流中已经没有“容身之处”了，这就是为什么给某个元素增加float(不为none)时会浮现在后一个元素的上方造成遮挡，为了解决这个问题特此就需要利用我们的 BFC 进行格式化上下文。

具有 BFC 特性的元素可以看做是一个隔离的容器，不管它的内部的元素翻汤倒海什么的都不会影响到外界的元素。

由此我们可以利用 BFC 来解决

• 解决浮动元素遮挡正常文档流中的元素
• 清除浮动来解决浮动元素父级崩塌
• 解决盒子之间上下外边距合并

以下方式可以帮助我们形成 BFC

• 根元素（）
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
• overflow 计算值(Computed)不为 visible 的块元素
• display 值为 flow-root 的元素
• contain 值为 layout、content 或 paint 的元素
• 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
• 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
  column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）