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

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

标签：

Html/CSS

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

什么是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>