乐趣区

关于前端:CSS有意思的BFCBlock-Formatting-Context块格式化上下文

jiezi

前言

大家好，我是 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>

页面展现如下：

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

.main {
    ...
    overflow: hidden;
}

此时页面展现如下：

胜利！

总结

BFC外部的渲染规定，在古代 flex 布局中其实有更多的解决方案，然而作为一个职业前端，还是须要理解一下。以上就是我的见解，不喜勿喷。

退出移动版