一首歌的时间轻松搞定BFC的原理及应用

舒健Wilson
225 阅读2分钟

什么是BFC？

BFC即Block Formatting Context的缩写，中文翻译过来就是块级格式化上下文。

BFC的原理

本质上就是BFC得渲染规则，总结起来有四点：

  • 属于同一个BFC的俩个相邻的元素的margin会发生重叠
  • BFC的元素不会与浮动元素产生重叠
  • BFC的元素是一个独立的容器，容器内的元素不会影响容器外部的元素，相反，容器外的元素也不会影响容器内的元素
  • 计算BFC的元素的高度的时候，浮动元素也会参与计算

如何创建BFC?

  • float值不为none
  • position为absolute或fixed
  • display为inline-block，table-cell，table-caption，flex；
  • overflow不为visible

BFC的使用场景

BFC的使用场景，紧贴BFC的原理进行阐述。
（1） BFC的元素垂直方向的边距会发生重叠

<style>
  * {
    padding: 0;
    margin: 0;
  }
  .container {
    /* 创建BFC */
    overflow: hidden;
  }
  .block {
    height: 100px;
    margin: 10px 0 30px 0;
    background: greenyellow;
  }
</style>
<div class="container">
  <div class="block">我是第一个BFC</div>
  <div class="block">我是第二个BFC</div>
  <div class="block">我是第三个BFC</div>
</div>

由于BFC内部元素的垂直方向的边距会发生重叠，因此第一个block和第二个block相距30px，并不是40px。因此，运行结果如下入所示。

1.png

（2） BFC的元素不会与浮动元素产生重叠

 <style>
  * {
    padding: 0;
    margin: 0;
  }
  .left {
    float: left;
    width: 200px;
    height: 400px;
    background: yellowgreen;
  }
  .right {
    height: 500px;
    background: violet;
  }
</style>
<div class="left"></div>
<div class="right"></div>

运行结果如下图所示：

2.png 可以发现，right类和left类发生了重叠，若业务要求我们right类和left类不能重叠，相互独立，这时候我们可以使用BFC的渲染规则，只需添加一行代码便可达到这一目的，对代码进行改造。

<style>
  * {
    padding: 0;
    margin: 0;
  }

  .left {
    float: left;
    width: 200px;
    height: 400px;
    background: yellowgreen;
  }

  .right {
    height: 500px;
    background: violet;
    /* 创建BFC */
    overflow: hidden;
  }
</style>
<div class="left"></div>
<div class="right"></div>

查看运行结果，果然达到了我们想要的效果。

3.png

（3）计算BFC的元素的高度的时候，浮动元素也会参与计算 利用这条BFC的渲染规则，我们可以很好的利用其作清除浮动。老规矩，上代码。

<style>
  * {
    padding: 0;
    margin: 0;
  }
  .parent {
    background: red;
  }
  .children {
    float: left;
    height: 300px;
    width: 400px;
    background: springgreen;
  }
</style>
<div class="parent">
    <div class="children"></div>
</div>

4.png 从运行结果可以看出，由于children类浮动脱离了文档流，因此没有把parent类的高度撑开，parent类高度为0，没有显示出来。因此我们可以利用BFC元素计算高度的时候，浮动元素也会参与计算这一BFC渲染规则，对其进行改造，同样是增添一行代码，改造后的代码如下。

<style>
* {
  padding: 0;
  margin: 0;
}
.parent {
  background: red;
  /* 创建BFC */
  overflow: hidden;
}
.children {
  float: left;
  height: 300px;
  width: 400px;
  background: springgreen;
}
</style>
<div class="parent">
  <div class="children"></div>
</div>

5.png 给parent类创建了BFC之后，在计算parent类高度的时候，也会把浮动元素的高度计算在其中，这也算是清除浮动了吧。

如果觉得本文对你有收获的朋友，请点个赞，接下来的日子我会继续更新更好的技术博客！谢谢！

avatar
文章
阅读
粉丝