BFC

• 什么是BFC?
  BFC(Block Formatting Context)"块级格式化上下文"
  它是一个独立的与外界隔离的渲染区域,它规定了内部的盒子如何布局

• 什么样的元素才能生产BFC

  • display属性为inline-block/block/flex/table-cell/table-caption等
  • float属性不为none
  • position属性为absolute或fixed,相对定位除外
  • overflow属性不为visible

• 具备生产BFC元素的特点?
  有宽度高度,有外边距margin,有内边距padding,有边框border

• BFC排序规则

  • 计算BFC高度时,自然也会检测浮动或者定位的盒子高度
  • 内部盒子会在垂直方向,一个接着一个的排列
  • 盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻盒子的margin会发生重叠
  • BFC区域不会和float区域重叠

• BFC主要应用场景

  • 清除浮动
  • 清除垂直方向margin层叠现象