【CSS】有意思的BFC：Block Formatting Context（块格式化上下文）！

最新推荐文章于 2023-12-09 08:13:08 发布

Coder HoMeTown

最新推荐文章于 2023-12-09 08:13:08 发布

阅读量146

点赞数

分类专栏：前端文章标签： css html 前端

本文链接：https://blog.csdn.net/isHoMeTown/article/details/127629235

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

前言

大家好，我是HoMeTown，今天想聊一聊CSS中的BFC，很多朋友应该都听过这个名词，搞懂BFC可以让我们理解CSS中一些很诡异的地方，话不多说，直奔主题！

什么是BFC

BFC是什么？引用MDN的一段介绍：

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

大白话讲，我理解BFC其实就是CSS中的块级作用域，包含上下文元素中的所有子元素，但不包括内创建了新的BFC的子元素的内部元素，也就是 A -> B -> C 但是 A !-> C，换句话讲，一个元素不可能存在于两个BFC中，因为如果一个元素存在于两个不同的BFC，那么这个元素就能和这两个BFC中的子元素发生作用，那就违法了BFC的初衷：隔离。

BFC的渲染规则

BFC中有特定的渲染规则，如下：

同一个BFC中两个相邻的元素的margin重叠问题
BFC在计算高度是，即使浮动的元素也会参与高度计算
BFC的区域不会与float的元素区域重叠
每个元素的左外边距与包含块的左边界相接触，即使浮动也如此
内部的盒子会一在垂直方向上一个个放置

BFC的触发条件

根元素（HTML标签）
float
overflow != visible
display = inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
postion = fixed / absolute

BFC的作用

防止相邻元素的margin重叠

上面提到过，同一个BFC的两个相邻元素的上下margin会发生重叠，举个🌰：

<style>
  p {
    width: 300px;
    height: 200px;
    margin: 100px;
    line-height: 200px;
    text-align: center;
    background-color: #f3eaff;
    color: #8857cd;
    font-weight: bold;
  }
</style>
  </head>
  <body>
    <p>HoMeTown</p>
    <p>你好朋友</p>
  </body>

页面显示如下：

在这里插入图片描述

同一个BFC中的两个相邻元素的margin上下重叠，此时我们需要手动创建新的BFC，解决这个问题，改动如下：

<style>
  p {
    width: 300px;
    height: 200px;![在这里插入图片描述](https://img-blog.csdnimg.cn/d6adf68750594a539be6e59158f44e87.gif#pic_center)

    margin: 100px;
    line-height: 200px;
    text-align: center;
    background-color: #f3eaff;
    color: #8857cd;
    font-weight: bold;
  }
  .wrapper {
    overflow: hidden;
  }
</style>
  </head>
  <body>
    <p>HoMeTown</p>
    <div class="wrapper">
      <p>你好朋友</p>
    </div>
  </body>

页面展示如下：

margin恢复正常

BFC在计算高度是，即使浮动的元素也会参与高度计算

众所周知，元素float脱离文档流之后，会产生高度塌陷的问题，除了清除浮动，我们还可以通过BFC的特性去处理，举个🌰：

<style>
  p {
    width: 300px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    background-color: #f3eaff;
    color: #8857cd;
    font-weight: bold;
    float: left;
  }
  .wrapper {
    width: 600px;
    border: 4px solid #cfc;
  }
</style>
  </head>
  <body>
    <div class="wrapper">
      <p>HoMeTown</p>
      <p>你好朋友</p>
    </div>
  </body>

页面展示如下：
在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gj1VcQij-1667269934588)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5d59f95c380047ef88bfe78a0ef85962~tplv-k3u1fbpfcp-watermark.image?)]

因为子元素浮动的原因导致盒子.wrapper高度塌陷，此时我们手动创建BFC区域，再看看效果，改动如下：

.wrapper {
    width: 600px;
    border: 4px solid #cfc;
    overflow: hidden;
}

此时，页面展示如下：
在这里插入图片描述

.wrapper的高度恢复正常！

每个元素的左外边距与包含块的左边界相接触

我们知道，如果盒子打开了float，脱离文档流且不占位，按照BFC的特点，块内每个元素的左边距都会与包含块的左边距重合，举个🌰

   <style>
      body {
        position: relative;
      }
      .main {
        width: 300px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        background-color: #f3eaff;
        color: #8857cd;
        font-weight: bold;
        border: 2px solid red;
      }
      .side {
        width: 100px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        background-color: #f3eaff;
        color: #8857cd;
        font-weight: bold;
        border: 2px solid yellow;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="side">你好朋友</div>
    <div class="main">HoMeTown</div>
  </body>

页面展示如下：
在这里插入图片描述

.side开启浮动，左外边距与body的左边重合，.main也是，这并不是我们想看到的，那么，可以利用BFC的特点，BFC包含上下文元素中的所有子元素，但不包括内创建了新的BFC的子元素的内部元素，手动给.main创建BFC，改动如下：

.main {
    ...
    overflow: hidden;
}

此时页面展示如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lmn092zt-1667269934592)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e6e5e5494ea9479d9ce37993b3711330~tplv-k3u1fbpfcp-watermark.image?)]

成功！

总结

BFC内部的渲染规则，在现代flex布局中其实有更多的解决方案，但是作为一个职业前端，还是需要了解一下。以上就是我的见解，不喜勿喷。

Coder HoMeTown

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS】有意思的BFC：Block Formatting Context（块格式化上下文）！

很多朋友应该都听过这个名词，搞懂BFC可以让我们理解CSS中一些很诡异的地方，话不多说，直奔主题！BFC是什么？引用MDN块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。大白话讲，我理解BFC其实就是CSS中的块级作用域，包含上下文元素中的所有子元素，但不包括内创建了新的BFC的子元素的内部元素，也就是但是A。
复制链接

扫一扫