[JavaScript知识库] BFC是什么？BFC（块级格式化上下文）详解

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> BFC是什么？BFC（块级格式化上下文）详解 -> 正文阅读

[JavaScript知识库]BFC是什么？BFC（块级格式化上下文）详解

BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中，是这么介绍BFC的：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，那这句话到底是什么意思呢？我们用代码来说明

<div class="d1" id="BFC1">
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4"></div>
    <div class="d5" id="BFC2">
        <div class="d6"></div>
        <div class="d7"></div>
    </div>
</div>

用这段代码来解释上面那段BFC定义的话，就应该是这个意思：#BFC1是一块BFC区域，这块区域包含了d2、d3、d4、d5，也就是所有#BFC1的子元素。同时#BFC2也创造了一块BFC区域，包含了d6，d7。注意，第一个d1的BFC，只包括d1的子元素d2,d3,d4,d5，不包括d6,d7。#BFC2这个BFC同样也仅仅是包括自己的子元素d6,d7。

1.BFC特性

（1）每一个BFC区域只包括其子元素，不包括其子元素的子元素

（2）每一个BFC区域都是独立隔绝的,互不影响!

2.触发BFC的条件

BFC并不是任意元素就能形成的，必须满足下面的其中一个条件

·body根元素

·设置浮动，不包括none

·设置定位，absoulte或者fixed

·行内块显示模式，inline-block

·设置overflow，即hidden，auto，scroll

·表格单元格，table-cell

·弹性布局，flex

<body>  
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4"></div>
    <div class="d5">
        <p class="p1"></p>
        <p class="p1"></p>
    </div>
</body>

比如上面的代码，我们的body就是一个BFC因为满足条件body根元素包含d2,d3,d4,d5因为他们是其子元素，不包含p1，p2因为不属于他的子元素。而d5并不是一个BFC因为并没满足上述的任何一个条件，那我们想让d5成为一个BFC的话，我们就要加上上述摸一个条件比如设置overflow：hidden或者设置定位。

4.利用BFC解决问题

上文说到每一个BFC区域都是独立隔绝的,互不影响!，那我们就可以利用这一特性来解决一些样式方面的问题了

（1）解决外边距的塌陷问题(垂直塌陷)

上代码：

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

<style scoped>
.box{
  width: 100px;
  height: 100px;
  background: greenyellow;
  margin: 100px;
}
</style>

效果截图：

我们发现我们设置了margin100px，讲道理的话应该是200px的间隔啊，但是其实上下两个div只有100的间隔，这个就是典型的margin的塌陷，两段margin重叠到了一块，互相影响。上文说过，BFC，就是一个与世隔绝的独立区域，不会互相影响，那么，我们可以将这两个盒子，放到两个BFC区域中，即可解决这个问题

   <div>
      <div class="boxCotent">
        <div class="box"></div>
      </div>
      <div class="boxCotent">
        <div class="box"></div>
      </div>
    </div>
<style>
.boxCotent{
  overflow: hidden;
}
.box {
  width: 100px;
  height: 100px;
  background: greenyellow;
  margin: 100px;
}
</style>

?（2）解决包含塌陷

在一些父子关系的盒子，给子元素添加margin-top，有可能会把父元素一起带跑，这个应该是我们经常遇到的问题。

<div class="dady">
      <div class="baby"></div>
</div>
<style scoped>
.dady{
  width: 120px;
  height: 120px;
  background: blue;
}
.baby{
  width: 20px;
  height: 20px;
  background: red;
  margin-top: 20px;
}
</style>

那么这个解决办法也是可以和以上一样加上overflow:hidden

(3)清除浮动流

最常见的情况就是用一个div来包裹浮动元素，那外层的div如果没有设置宽高的时候是不能被撑开的

 <div class="dady">
      <div class="baby"></div>
      <div class="baby"></div>
      <div class="baby"></div>
 </div>
<style>
.dady{
  background: blue;
}
.baby{
  width: 20px;
  height: 20px;
  background: red;
  float: left;
}
</style>