网络日志

【CSS】有意思的BFC:Block Formatting Context(块格式化上下文)!

前言

大家好,我是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-blocktable-celltable-captiontableinline-tableflexinline-flexgridinline-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>

页面展示如下:

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

.main {
    ...
    overflow: hidden;
}

此时页面展示如下:

成功!

总结

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