BFC 块级格式化上下文 (Block Formatting Context),是css渲染规则之一  。一个BFC盒子是独立布局的,盒子里面的子元素布局不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的 margin 会发生折叠。 

触发BFC规则的方式:

  • 根元素(html)
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible

原文地址:https://course.51qux.com/1667.html