BFC是什么？BFC（块级格式化上下文）详解

最新推荐文章于 2023-04-19 18:01:00 发布

心之所向_gp

最新推荐文章于 2023-04-19 18:01:00 发布

阅读量582

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_55182699/article/details/122528900

版权

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>

这个时候我们能看到压根就没有什么blue的样式了，这就很blue了。而我们像上面一样把这个blue的盒子变为BFC的话我们就有了

总结：

1.一个BFC区域只包含其子元素，不包括其子元素的子元素。

2.并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。

3.不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响。

心之所向_gp

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BFC是什么？BFC（块级格式化上下文）详解

BFC - Block Formatting Context 块级格式化上下文 BFC的定义，在官方文档到中，是这么介绍BFC的：一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，那这句话到底是什么意思呢？我们用代码来说明<div class="d1" id="BFC1"> <div class="d2"></div> <div class="d3"></div> <d
复制链接

扫一扫