BFC的概念

BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。其实就是一个独立区。

形成BFC的方式

1. 将元素脱离文档流 （浮动、绝对定位、固定定位）
2. 变成可以设置高度的一类行内元素（inline-block、table-cell、table-caption）
3. overflow将内容封闭在一个空间（除visible以外的值）

BFC的特点

1.不与浮动元素重叠
2.计算容器内浮动元素的高度

3. 其它的其实和div差不多

应用

1. 利用计算容器内浮动元素的高度的特点清除浮动

<style>
    * {margin:0;padding:0; font‐size:14px;}
    ol {list‐style:none;}
    ol li {overflow:hidden;}
    ol li strong {float:left; }
    ol li p {overflow:auto;} 
</style>
<ol>
    <li><strong>内容：</strong><p>“地球一小时”</p></li>
    <li><strong>内容：</strong><p>“地球一小时”</p></li>
    <li><strong>内容：</strong><p>“地球一小时”</p></li>
    <li><strong>内容：</strong><p>“地球一小时”</p></li>
</ol> 

2. 利用不与浮动元素重叠的特点实现宽度自适应

<style>
 .column:nth-of-type(1) {
    float: left;
    width: 200px;
    height: 300px;
    margin-right: 10px;
    background-color: red;
}

.column:nth-of-type(2) {
    overflow: hidden;/*创建bfc */
    height: 300px;
    background-color: purple;
}
</style>
<div class="column"></div>
<div class="column"></div>

参考文章 CSS中的BFC详解