BFC 规则及解决的问题？

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

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

  • 怎样生成BFC

    • 根标签

    • float的值不为none

    • overflow 的值不为 visible

    • display 的值为 inline-block

    • position 的值为 absolute 或 fixed

  • BFC的特性

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

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

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

    • 计算BFC的髙度时，浮动子标签也参与计算。

    • BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签， 反之亦然。

  • BFC解决的问题

    • 外边距塌陷

    • 清浮动