BFC是什么？大白话解释

前端菜鸡小卒

于 2022-03-23 23:51:12 发布

阅读量799

点赞数 2

分类专栏： CSS 文章标签： BFC

本文链接：https://blog.csdn.net/qq_30376375/article/details/123699502

版权

CSS 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

1、定义

BFC：块级格式化上下文

2、特点：

每一个BFC区域只包括其子元素，不包括其子元素的子元素。
每一个BFC区域都是独立隔绝的,互不影响

<div class="box1" id="HM_bfc1">
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5" id="HM_bfc2">
        <div class="box6"></div>
        <div class="box7"></div>
        <div class="box8"></div>
    </div>
</div>

#HM_bfc1是一块BFC区域，这块区域包含了box2、box3、box4、box5，也就是所有#HM_bfc1的子元素。

#HM_bfc2也创造了一块BFC区域，包含了box6，box7，box8。

3、触发BFC的条件

不是任意一个元素都可以被当做BFC，只有当这个元素满足以下任意一个条件的时候，这个元素才会被当做一个BFC。

1、body根元素

2、设置浮动，不包括none

3、设置定位，absoulte或者fixed

4、行内块显示模式，inline-block

5、设置overflow，即hidden，auto，scroll

6、表格单元格，table-cell

7、弹性布局，flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div id="hm_1"></div>
  <div id="hm_2"></div>
  <div id="hm_3">
    <p>66666666666</p>
    <p>88888888888</p>
  </div>
  <div id="hm_4"></div>
</body>
<script>
</script>
</html>

1、body元素是1个BFC，因为它满足我们的第1个条件(body根元素)，这个BFC区域包含子元素hm1234，但是不包括两个p标签

2、hm_3不是一个BFC区域，因为他不满足上面任意1个条件.

如果让hm_3也是1个BFC区域，只要让hm_3满足上面任意一个条件即可，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      #hm_3 {
        overflow: hidden;
      }
    </style>
</head>
<body>
  <div id="hm_1"></div>
  <div id="hm_2"></div>
  <div id="hm_3">
    <p>66666666666</p>
    <p>88888888888</p>
  </div>
  <div id="hm_4"></div>
  <!-- hm_3元素被设置为了overflow为hidden，hm_3就成为了一个BFC区域， -->
  <!-- 这个BFC区域包含其所有子元素 – 两个p标签。 -->
</body>
<script>
</script>
</html>

4、利用BFC解决问题

4.1 解决外边距的塌陷问题(垂直塌陷)

外边距的垂直塌陷问题

两段margin重叠到了一块，互相影响。用BFC，让这个问题得到解决。

4.2 利用BFC解决包含塌陷

当父子关系的盒子，给子元素添加margin-top，有可能会把父元素一起带跑。

由于margin的塌陷问题，导致盒子内部的布局影响到了外部。这时就可以触发BFC，将父盒子变成一个独立的区域，这样在BFC区域内部的任何操作，都不会影响到外部。

4.3 当浮动产生影响的时候，可以利用BFC来清除浮动的影响

当所有的子元素都浮动了，这时父盒子失去了原有的高度，这就是浮动的影响。同样也可用BFC的机制，来清除浮动带来的影响。使用BFC，将所有的浮动元素包裹起来。

4.4 BFC可以阻止标准流元素被浮动元素覆盖

上面的情况，红色盒子浮动，蓝色盒子时标准流，默认情况下，浮动元素覆盖了标准流元素。但是，如果将蓝色盒子的BFC触发，那么情况将有所变化。

当蓝色盒子触发了BFC之后，浮动元素再也不能覆盖它了，而且还能利用这个特性，来实现蓝色盒子宽度根据红色盒子的宽度来做自动适应

总结

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

2、只有当这个元素满足上面七个条件之一的时候才会成为一块BFC区域。

3、不同的BFC区域之间是相互独立的，互不影响的。

前端菜鸡小卒

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
BFC是什么？大白话解释

1、定义BFC：块级格式化上下文2、特点：每一个BFC区域只包括其子元素，不包括其子元素的子元素。每一个BFC区域都是独立隔绝的,互不影响<div class="box1" id="HM_bfc1"> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div clas
复制链接

扫一扫