【面试】BFC是什么，有什么用，怎么用？

0、总结

面试答题顺序：

（1）描述BFC是什么，重点说到它会形成一个渲染区域，将内部子元素与外部元素隔绝开；
（2）说说BFC的特点，包括BFC内部盒子怎么放，内部盒子也会发生外边距合并的问题，BFC与浮动，BFC的高度如何计算；
（3）BFC有什么用；
（4）BFC怎么用，怎么触发

1、是什么？

BFC（Block Formatting Context），块级格式化上下文，形成一块独立的渲染区域。可以将BFC看成是元素的一种属性，拥有了这种属性的元素，其内部的子元素将与外部元素隔绝开，互不影响。
其实很多时候我们都用到了BFC，只是很多时候可能没有意识到而已。

需要注意的是，：
BFC内部的元素依然与其他内部元素有关联，依然会受到其他元素布局的影响，BFC只是将内部元素与外部元素隔绝开，并不能控制自己内部元素的外边距合并等问题。
可以通过BFC内部再次形成BFC解决。

2、有什么用？

（1）案例：垂直方向margin合并

现有两个100px*100px的盒子，A盒子的margin-bottom为10px，B盒子的margin-top为20px：

我们发现，这时候A盒子的margin-bottom不见了，被B盒子的20px的margin-top吞并了，这种现象被称为垂直方向margin合并——垂直方向上，两个元素上下margin相遇时，两元素之间的总间距并不等于两个margin的和，而是等于最大的margin，小的margin会被大的margin吞并。
要解决这个问题，就需要对这两个盒子中的任意一个用到BFC，将其中一个盒子包裹起来，让它在BFC内部，成为其子元素，从而起到隔绝作用。

    <!-- 在A盒子外部新增一个盒子，将它包裹起来 -->
    <div class="bfcBox">
      <div class="box1">A</div>
    </div>
    <div class="box2">B</div>

      * {
    
    
        margin: 0;
        padding: 0;
      }
      .box1,
      .box2 {
    
    
        width: 100px;
        height: 100px;
      }
      .box1 {
    
    
        margin-bottom: 10px;
        background-color: red;
      }
      .box2 {
    
    
        margin-top: 20px;
        background-color: green;
      }
      /* 给外部的盒子添加BFC属性，从而将A盒子与外部隔绝，不再受B盒子的影响 */
      .bfcBox {
    
    
        overflow: hidden;
      }

（2）其他应用：

① 清除浮动，通过设置 overflow:hidden 解决父元素坍塌问题；
② 垂直 margin 合并，BFC 区域内两个相邻元素的垂直外边距会发生叠加，叠加后的外边距为两者外边距的最大值。这样可保持各区域间上下间距一致，比如多个段落之间与顶部底部的边距保持一致；
③ 防止垂直 margin 合并，反之可以在元素外层包裹一层容器，并触发该容器生成一个新的 BFC 布局，与相邻元素隔离开来；
④ 实现自适应双栏、三栏布局，利用浮动、定位、Flex 布局原理可实现多种自适应布局

3、怎么用？

能形成BFC的有一下几种方式，只需要任意触发一种就行：
① 根节点本身是一个BFC
② 浮动元素：float 不为 none
③ 绝对定位元素：position（absolute、fixed）
④ 块级元素/ flex ：display 为 inline-block、flex
⑤ 溢出隐藏：overflow ：hidden