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

HoMeTown

发布于 2022-10-26 08:43:45

57300

代码可运行

文章被收录于专栏：秃头开发头秃了秃头开发头秃了

运行总次数：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;    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>

页面展示如下：

因为子元素浮动的原因导致盒子.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>

页面展示如下：