我们俗称的BFC（Block Formatting Context）中文解释为块格式化上下文。我们通过一个简单的float布局示例来看看BFC。，我们创建一个盒子，盒子中包含一个设置了浮动的图片和一段文本。如果有足够多的文本内容的时候，文本会围绕着图片（把整个图片包裹起来）。
I am a floated element.
I am text inside the outer box.
/* CSS */
.outer {
border: 5px dotted rgb(214，129，137)；
border-radius: 5px;
width: 450px;
padding: 10px;
margin-bottom: 40px;
}
.float {
padding: 10px;
border: 5px solid rgba(214，129，137，.4);
border-radius: 5px;
background-color: rgba(233，78，119，.4);
color: #fff;
float: left;
width: 200px;
margin: 0 20px 0 0;
}
文本围绕着浮动元素：
如果在上面的基础上删除一些文本，就没有足够的文本去围绕图片（上例是一个浮动的元素），同时由于浮动元素脱离文档流，盒子元素的边框（包含浮动元素和文本的容器）高度就会随着文本的减少而降低（常被理解元素浮动之后致使其父容器坍塌）。
上图再次证明，没有足够多的文本时，盒子元素边框的高度就会低于浮动元素的高度。
之所以会这样，那是当浮动一个元素时，盒子仍然保持原来的宽度，是文本所占的空间缩短了，才给浮动元素腾出位置，这就是为什么背景和边框能够看起来包裹住了浮动元素。
有两种方式可以解决这个布局问题。一种是使用clearfix黑魔法，就是在文本和图片（浮动元素）的下面插入一个元素，比如div，并将设置clear属性值为both。另外一种方法是使用overflow属性，把它设置为非默认值visible的值。
.outer {
overflow: auto;}
使用overflow:auto后盒子就能包裹浮动元素。
overflow之所以能够有效是因为当它的值是非visible时会创建一个BFC，而BFC的一个特性就是包裹浮动元素。
使用Clearfix黑魔法时，除了在浮动的元素和文本最下面插入一个元素之外，更简单，也是最为经典的方式是使用CSS的伪元素::after或伪类:after。其实也就是大家常说的清除浮动，有关于这方面的详细介绍可以点击这里。
