BFC

BFC(Block Formatting Context)即块级格式化上下文，在理解这个概念之前，我们要先了解一些的概念：

盒子（box):一个完整的盒子的中心有一个内容区，这个内容区的周完可以设置padding和margin。盒子和元素不是一一对应的，有时多个元素会合并成一个盒子，有时一个元素会生成多个盒子。

视觉格式化模型：通俗来说就是它就是一套规则，将盒子布局成你想要的效果。

块级元素：设置元素的display属性为block、list-item、table时，该元素将成为“块级元素”，处于正常文档流中的块级元素会垂直摆放。

块级盒子：一个块级元素都至少生成一个块级盒子，块级盒子才会参与“块级格式化上下文”的创建。

所以我们再回过头来读BFC的定义，它的特性就是让内部的盒子会在垂直方向上一个接一个排列，即BFC是有正常的文档流的，除此之外，它也可以用于处理外边距重叠问题和清除浮动。

接下来本文从BFC的创建、BFC的范围、BFC的效果和BFC的实例来完整介绍BFC的用法和特性。

一、 BFC的创建

浮动： float: left | right
定位： position: absolute | fixed
行内块： display: inline-block
表格单元：display：table-cell ...
overflow: auto | hidden | overlay | scroll
弹性盒子（display: flex | inline-flex）

二、BFC 的范围

官方定义：一个bfc包含该上下文的所有子元素，但不包含创建了新bfc的子元素的内部元素

BFC包含了这个盒子内部所有的子元素。也就是说如果有一个容器a里面装了b，b里面c，c里面装了d 那么这些嵌套的很深。那么a盒子一旦变成了BFC 盒子的话，那么它的作用范围可以作用到盒子b、c、d。

可是如果把a 变成了BFC之后，又把c 变成了BFC了，那么c里面的内部元素d就不能被a的BFC作用到了。即一个元素时不能同时处于两个BFC中的。

三、BFC的效果

BFC的效果，是让处于 bfc 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。 这里要注意，BFC是包含上下文的所有子元素，但是BFC的效果不会渗透子容器。

四、BFC作用实例

1.清除容器内部的浮动

<style>
    ul li {
      list-style: none;
      width: 100px;
      height: 100px;
      float: left;
      background-color: aqua;
    }
    ul{
      
    }
  </style>
</head>
<body>
  <div class="wrap">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
</body>

2022-07-14(1).png

因为float属性会脱离文档流，导致ul没有高度，要改变这一点，我们可以将ul设置为BFC

ul{
      overflow: auto;
    }

2022-07-14 (2)(1).png 此时设置ul为BFC容器，因为BFC在计算高度时，浮动元素也会被计算在内，所以在设置后ul会有高度。

解决外边距重叠问题

QQ图片20220715125752.png

本来box1在页面上应该是置顶的，但因为box2设置了外边距，导致box1外面发生变化，所以此时我们把box1创建成BFC容器，让它的内外元素相互隔离

.box1{
      width: 100%;
      height: 600px;
      background-color: aquamarine;
      overflow: auto;
      position: relative;
      z-index: -3;
    }

VXF1RUA0O5KQ()_8GXQX252.png

可以看到此时的box1恢复了正常，box1置顶，box2距离顶部有200px的距离

源码:

<style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1{
      width: 100%;
      height: 600px;
      background-color: aquamarine;
      overflow: auto;
      position: relative;
      z-index: -3;
    }
    .box2{
      overflow: auto;
      width: 100%;
      height: 200px;
      margin-top: 200px;
      background-color: rgb(251, 255, 127);
      position: relative;
      z-index: -2;
    }
    
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2">
     
    </div>
  </div>
</body>

最后

小伙伴们有问题或者发现文章有错漏可以在评论区提出，最后读完了这篇文章觉得还不错的话就点个免费的赞吧！之后还会有前端知识分享，关注我不迷路！

一篇读懂什么是BFC

BFC

一、 BFC的创建

二、BFC 的范围

三、BFC的效果

四、BFC作用实例

最后