前言

大家好，我是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布局中其实有更多的解决方案，然而作为一个职业前端，还是须要理解一下。以上就是我的见解，不喜勿喷。