BFC的特性

1.BFC

        block Formatting Context 块级格式化上下文
        是一个独立渲染空间，外界不会影响它，它也不受外界的影响。
        只有 Block-level BOX 参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

2.怎么生成bfc？

        1)根标签
        2）overflow值不为visible (hidden,scroll,auto)
        3)float为left/right
        4)position为absolute/fixed
        5)display为inline-block

3.BFC特性

        1、内部的标签会在垂直方向上一个接一个的放置
        2、垂直方向上的距离由 margin 决定，属于同一个 BFC 的两个相邻标签的 margin 会发生重叠
        3、每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。

        4、BFC 的区域不会与 float 的标签区域重叠
        5、计算 BFC 的高度时，浮动子标签也参与计算
        6、BFC 就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然

4.BFC解决的问题

        1）外边距塌陷问题 -- 特性6
        2）清除浮动带来的影响，解决高度塌陷 -- 特性5
        3）文字环绕 -- 特性4
        4)两栏布局三栏布局 -- 特性4