css BFC

BFC

BFC(Block Formatting Context)：块级格式化上下文。
BFC决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当设计到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定的规则进行布局。一个环境中的元素不会影响到其他环境中的布局。

BFC的原理（渲染规则）

1. BFC元素垂直方向的边距会发生重叠。属于不同BFC外边距不会发生重叠
2. BFC的区域不会与浮动元素的布局重叠。
3. BFC元素是一个独立的容器，外面的元素不会影响里面的元素。里面的元素也不会影响外面的元素。
4. 计算BFC高度的时候，浮动元素也会参与计算(清除浮动)

如何创建BFC

1. overflow不为visible;
2. float的值不为none；
3. position的值不为static或relative；
4. display属性为inline-blocks,table,table-cell,table-caption,flex,inline-flex;

说了这么多规则，放几个实类出来看看。

    <section id="margin">
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            #margin {
                background: pink;
                overflow: hidden;
            }
            p {
                margin: 15px auto 25px;
                background: red;
            }
        </style>
        <p>1</p>
        <div style="overflow: hidden">
            <p>2</p>
        </div>
        <p>3</p>
        <p>4</p>
    </section>

请看这里的第二个p元素<p>2</p>他被一个父元素包裹，并且父元素有 overflow:hidden 样式，前面的如何创建BFC的第一条就说了 overflow:hidden 可以创建一个BFC。结果如下图所示。

我们看这里的2，它的上下外边距都没有与1和3发生重叠，但3与4外边距发生了重叠。这就解释了BFC创建了一个独立的环境，这个环境中的元素不会影响到其他环境中的布局，所以BFC内的外边距不与外部的外边距发生重叠。

---

再看看下面的列子：

    <section id="layout">
        <style media="screen">
            #layout {
                background: red;
            }
            #layout .left {
                float: left;
                width: 100px;
                height: 100px;
                background: pink;
            }
            #layout .right {
                height: 110px;
                background: #ccc;
            }
        </style>
        <div class="left"></div>
        <div class="right"></div>
    </section>

效果如下：

写过前端页面的我们肯定遇到过这种情况，这里其实是浮动元素叠在 .right 元素的上面，如果我们想让.right元素不会延伸到 float元素怎么办,其实我们在.right元素上加 overflow:hidden （用其他的方式创建BFC也可以）创建BFC就可以解决。因为BFC不会与浮动元素发生重叠。

---

还有一种情况很常见，就是由于子元素浮动，导致父元素的高度不会把浮动元素算在内，那么我们在父元素创建BFC就可以让可以让浮动元素也参与高度计算。

IFC这里就不介绍，大家可以自行搜索。