BFC是什么？BFC的四种理解方式

一 、BFC的解释：

        块级格式化上下文，是一块独立的渲染区域，BFC的特性容器里面的元素不会影响外边元素布局，当然外部的元素也不能影响内部元素的布局

二​​ 、原理：

        ①、内部的box垂直排列

        ②、BFC元素的垂直方向，外间距由 (margin) 决定

        ③、BFC内的元素和 (float) 区域的元素不会重叠

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

               BFC里的元素，反过来，里面的也不会影响外面的

        ⑤、BFC元素的高度会将浮动的元素高度计算在内

三 、触发 BFC：

          ①、浮动元素 float 除 none 以外的值 float：leat / right

          ②、定位元素  position  （absolute、fixed）

          ③、display  以下其中之一的值，inline-block、table-cell、table-caption

          ④、overflow 除了  visibility 以外的值 （hidden、auto、scroll）

四 、使用场景解决了什么问题？

        ① 、自适应两栏布局

        ② 、margin 的重合

        ③ 、清除浮动

        ④ 、margin 的紧急拖拽

        ​​​​​