BFC概念

                                                 BFC

BFC的概念

     BFC即block formatting contexts（块级格式化上下文），通俗一点来讲，可以把BFC理解为一个封闭的大箱子，箱子内的元素无论如何翻江倒海，都不会影响外部。

BFC的触发条件

       1，根元素html默认就是一个BFC 

       2 ，float的值不为none 单纯的div不是BFC，如果添加了浮动就是BFC

       3，overflow的值不为visible   单纯的div不是BFC，如果添加了overflow：hidden就是BFC

       4，display的值为line-block/table-cell/table-caption/flex/inline-flex

       5，position的值为absolute或fixed

BFC的特性及应用

      1，Box垂直方向的距离有margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠（应用：防止marin重叠）

       2，BFC的区域不会与float box发生重叠（应用：自适应两栏布局）

       3，计算BFC的高度时，浮动元素也参与计算（应用：清楚内部浮动）

       4，BFC内部的Box会在垂直方向，一个接一个的放置

       5，每个元素的margin box的左边会与包含块的border box的左边相接触(对于从左到右的格式化，否则相反)，即使存在浮动也会如此

       6，BFC就是页面上的一个独立容器，容器里面的元素不会影响外面的元素