BFC的概念
BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。其实就是一个独立区。
形成BFC的方式
- 将元素脱离文档流 （浮动、绝对定位、固定定位）
- 变成可以设置高度的一类行内元素（inline-block、table-cell、table-caption）
- overflow将内容封闭在一个空间（除visible以外的值）
BFC的特点
1.不与浮动元素重叠
2.计算容器内浮动元素的高度
- 其它的其实和div差不多
应用
- 利用计算容器内浮动元素的高度的特点清除浮动
<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>
- 利用不与浮动元素重叠的特点实现宽度自适应
<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详解
