BFC(前端面试重点)

BFC (Block Formatting Context) 块级格式化上下文

• 什么是bfc？

  • Formatting Context：指页面中的一个渣染区域，并且拥有一套渣染规则，他决定了 其子标签如何定位，以及与其他标签的相互关系和作用。

    BFC块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与， 该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

• 怎样生成BFC?

  • 根标签

  • float的值不为none

  • overflow 的值不为 visible

  • display 的值为 inline-block

  • position 的值为 absolute 或 fixed

• BFC的特性

  • 内部的标签默认会在垂直方向上一个接一个的放置。

  • 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发 生重叠。

  • 每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。