块级格式化上下文(BFC)

什么是BFC

BFC是一个独立的容器，它使容器内的元素不受外界元素干扰，比如外边距合并。

BFC产生的条件

• 根元素或其它包含它的元素
• 浮动元素 (元素的 float 不是 none)
• 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
• 内联块 (元素具有 display: inline-block)
• 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
• 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
• 具有overflow 且值不是 visible 的块元素
• display: flow-root
• column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column
• span: all 的元素并不被包裹在一个多列容器中。
  一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

BFC的作用

• 清除浮动
• 解决外边距合并问题