什么是BFC、可以解决哪些问题

BFC概念：

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

产生BFC的方法：

1. float有值且不为空。
2. overflow有值且不为visible。
3. display有值为：inline-block，table-cell，flow-root，table-caption，inline-flex中的一个。
4. position有值为absolute或者fixed。

以上条件满足任意一个即可形成BFC。

BFC可以解决哪些问题：

1.避免外边距折叠。

通常情况下，外边距会取最大的那个值，这时要避免这个问题我们就可以利用BFC。

代码如下：

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

    div {
        overflow: hidden;
    }

    .top {
        width: 200px;
        margin-bottom: 10px;
        background: pink;
        height: 200px;
    }

    .bottom {
        height: 200px;
        width: 200px;
        background: red;
        margin-top: 30px;
    }

    .bb {
        overflow: hidden;
    }
</style>

  <div class="box">
        <div class="top"></div>
        <div class="bb">
            <div class="bottom"></div>
        </div>
    </div>

效果如下：

2.避免文字环绕

解决文字环绕代码如下：

  <style>
        .container {
            width: 300px;
            height: 200px;
            background: pink;
        }

        .floated {
            height: 50px;
            width: 80px;
            float: left;
            background: red;
        }

        .op {
            overflow: hidden;
        }
    </style>
 <div class="container">
        <div class="floated">
            Floated div
        </div>
        <div class="op">
            <p>
                Quae hic ut ab perferendis sit quod architecto,
                dolor debitis quam rem provident aspernatur tempora
                expedita.
            </p>
        </div>
    </div>

效果图如下：

这个方法可以用来实现两列自适应布局，效果不错，这时候左边的宽度固定，右边的内容自适应宽度。

3.浮动元素不会乱跑。（包含浮动元素）

  <style>
        .out {
            border: 10px solid red;
            min-height: 20px;
            width: 500px;
        }

        .in {
            height: 100px;
            width: 500px;
            background: gray;
        }
    </style>
     <div class="out">
        <div class="in"></div>
    </div>

若给in添加了浮动，则会变成如下效果：
如果在有浮动的情况下还要达到第一种效果，此时我们需要创建BFC，即在out上添加overflow: hidden;即可。