BFC

一.定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

二. 触发 BFC

body
根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

但其中，最常见的就是overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就代表了该元素以及创建了一个BFC了。

三. 使用场景

1.利用BFC避免外边距折叠

两元素之间的间距只有100px，也就是重叠了。
如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。

<style>
        .bfc {
            overflow: hidden;
        }
        .bfc div {
            width: 100px;
            height: 100px;
            background:aqua;
            margin: 100px;
        }
</style>
<body>
    <div class="bfc">
        <div></div>
    </div>
    <div class="bfc">
        <div></div>
    </div>
</body>

2.BFC 清除浮动

浮动元素是会脱离文档流的(绝对定位元素会脱离文档流)。如果一个没有高度或者height是auto的容器的子元素是浮动元素，则该容器的高度是不会被撑开的。我们通常会利用伪元素(:after或者:before)来解决这个问题。BFC能包含浮动，也能解决容器高度不会被撑开的问题。

<style>
        .container {
            border: 2px solid rebeccapurple;
        }
        .container div {
            width: 100px;
            height: 100px;
            background:aqua;
            margin: 10px;
            float: left;
        }
</style>
<body>
    <div class="container">
        <div></div>
        <div></div>
    </div>
    <div class="bfc">
        <div></div>
    </div>
</body>

在上面这个例子中，容器没有任何高度，并且它包不住浮动子元素，容器的高度并不会被撑开。为解决这个问题，可以在容器中创建一个BFC：
.container { overflow: hidden; border: 2px solid rebeccapurple; }

3. 使用BFC避免文字环绕

.container {
            width:300px;
        }
        .floated {
            float: left;
            width:50px;
            height: 50px;
            background: red;
   }
<div class="container">
        <div class="floated">
            Float
        </div>
        <p>
            jaaahahhahahhaha Quae hic ut ab perferendis sit quod architecto, 
            dolor debitis quam rem provident aspernatur tempora
            expedita.
        </p>
</div>

p 元素没有移位但它叠在了浮动元素之下，而p元素的文本(行盒子)却移位了，行盒子水平变窄来给浮动元素腾出了空间。随着文本的增加，最后文本将环绕在浮动元素之下，因为那时候行盒子不再需要移位，也就成了图中的样子。
此时只要把p设置成BFC 就可以避免文字环绕

4. 全屏多列布局防止浏览器属性换行

如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。但如果我们在多列布局中的最后一列里创建一个新的BFC，它将总是占据其他列先占位完毕后剩下的空间

<div class="container">
        <div class="column">column 1</div>
        <div class="column">column 2</div>
        <div class="column">column 3</div>
</div>
.column {
            width: 31.33%;
            background-color: yellowgreen;
            float: left;
            margin: 0 1%;
  }

最后一个元素用BFC

.column:last-child {
    float: none;
overflow: hidden; 
}

BFC