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

能不能给我一首歌的时间，紧紧的把那拥抱变成永远~
开头献上杰伦放松一下。

jayChou.jpg

什么是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。因此，运行结果如下入所示。

BFC_demo1.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>

运行结果如下图所示：

BFC_demo2.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>

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

BFC_demo3.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>

BFC_demo4.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>

BFC_demo5.png

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

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