BFC（块级格式化上下文）

        BFC（块级格式化上下文），一个独立的渲染区域，只有块级元素参与，规定了内部块级元素的布局方式，且该区域与外部无关。 BFC元素特性原则：内部子元素在怎么变动都不会影响外部元素。

布局方式：

                1，内部BOX会垂直方向上一个接一个放置，所以是从上向下排列。

                2，元素的margin左边和父级的左边紧挨，浮动元素也是这样，所以从左向右排列。

                3，BOX垂直方向上距离margin决定，单同一个BFC的两个相邻元素的margin会出现外边距合并（overflow 可以解决外边距合并）。

                4，BFC是页面上一个隔离的独立容器，内容子元素影响外部元素。

                5，计算BFC高度时，浮动元素也参与计算（overflow 清除浮动以后可以撑开盒子高度）。

   BFC的生成：

                      根元素body ，浮动float 不为none ，定位position：absolute/fixed，overflow，display：inline-block/

flex/table-cell。