1、什么是BFC

BFC Block Formatting Contexts （块级格式化上下文）
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性
简单来说 具有BFC 特性的元素，内部元素如何变化都不会影响到外部

2、如何触发BFC

只要满足下面任意条件均可触发：

  • body 根元素
  • 浮动元素：float 除 none 以外的值
  • 绝对定位元素：position (absolute、fixed)
  • display 为 inline-block、table-cells、flex

  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

    3、BFC 的应用

  • 阻止margin重叠

  • 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
  • 自适应两栏布局
  • 可以阻止元素被浮动元素覆盖