18-BFC(块级格式化上下文)

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层叠现象

你可能感兴趣的:(18-BFC(块级格式化上下文))