成长(13/2000)——面试题合集10

BFC格式化上下文

  • 它是指一个独立的块级渲染区域,只有Block-level BOX参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。
  • BFC的区域不会与float box重叠。
  • 计算BFC的高度时,浮动元素也参与计算
  • 举例:当一个盒子没有设置高度,其内容子元素浮动时,无法撑起自身,这个盒子没有形成BFC
  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  • 如何创建
  1. float的值不是none
    2.position的值不是static或者relative
    3.display的值是inline-block、flex或者inline-flex
    4.overflow:hidden
  • BFC的其他作用
    1.取消盒子的margin塌陷
    2.可以阻止元素被浮动元素覆盖
  • 实际应用
    1.两栏布局

你可能感兴趣的:(成长(13/2000)——面试题合集10)