到底什么是BFC?一篇就够了

到底什么是bfc？

1、规范解释：块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

2、通俗理解：BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。

3、BFC是一个css渲染特殊的一部分，需要一定的条件才能触发：
(1) 给元素添加浮动，浮动元素就具有BFC特性----
float: left/right;

(2) 给元素添加overflow属性----
overflow: hidden，auto，scroll(除了visible);

(3) 给元素添加display属性----
display: inline-block, flex, inline-flex, table-cell，table-caption;

(4) 给元素添加定位----
position: absolute，fixed

4、bfc特性
(1)内部的Box会在垂直方向，从顶部开始一个接一个地放置
(2)Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加，与方向无关
(3)每个元素的margin box的左边，与包含块border box的左边相接触，即使在浮动元素中也是这样
(4)BFC的区域不会与float box叠加，利用此特性可以实现两列布局，左边固定宽度，右边自适应
(5)BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，里面的子元素也不会影响到外面的元素
(6)计算BFC的高度时，浮动元素也会参与计算

5、bfc可以解决的问题：
(1) 外边距塌陷的问题：
首先理解何为外边距塌陷？
第一种是父子元素之间的外边距塌陷
第二种是兄弟元素之间的外边距重叠
如果需要详细了解外边距塌陷，请参考以下链接：https://blog.csdn.net/qq_41893334/article/details/90574032

现在主要是思考bfc如何解决此问题：

• 解决第一种父子元素外边距塌陷的方法是

* {
  margin: 0;
  padding: 0;
  }
.box {
  width: 400px;
  height: 400px;
  background-color: skyblue;
  /* 给.box上触发bfc规范--如使用overflow：hidden */
  overflow: hidden;
}

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 30px;
}

<!-- ps: 我这里只写上主要的代码，写太多会看着很麻烦，如果想要了解更清楚，请主动测试 -->

<div class="box">
  <div class="box1"></div>
 </div>

这样父元素就是一个独立的盒子，不会受到.box1的margin-top的影响

• 解决第二种兄弟元素之间外边距塌陷的方法是

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-bottom: 30px;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-top: 10px; 
}

<div class="box1"></div>
<div class="box2"></div>

这时就会产生外边距塌陷的问题：
这时外边距会怎么计算呢？
1.两个都是正数，取较大的值
2.两个都是负数，取绝对值较大的值
3.一正一负，取两个值得和

而解决这种外边距重叠的方法就是利用bfc在box2的外边再包装一层box，此box就具有bfc特性，把就不会受到外部margin值的影响

.box-newBFC {
  overflow: hidden;
}

<!-- .box1 和 .box2 的样式与上一样 -->

<div class="box1"></div>
<div class="box-newBFC">
  <div class="box2"></div>
</div>

OK，这里讲的bfc解决外边距塌陷的问题解决。

(2)解决float产生浮动的问题，我们一般会清除浮动，清除浮动有很多种方法，这里我就不一一列举了，而使用over-flow：hidden的方法就是bfc解决浮动的方法。

具体实施就是在浮动元素的父元素上触发BFC，添加一个over-flow：hidden

最后，讲一下使用bfc怎么实现两列自适应布局

     /* 使用bfc规范实现两栏布局,box2 可以自适应宽度 */
    .box {
      width: 300px;
      height: 400px;
      background-color: skyblue;
    }
    .box1 {
      float: left;
      width: 100px;
      height: 100px;
      background-color: red;
    } 
    .box2 {
      /* 利用bfc特性bfc区域不会与float-box区域重叠 */
      overflow: hidden;
      height: 200px;
      background-color: blue;
    }``
    
  <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>