理解CSS中BFC

CSS布局中有一些概念，一旦理解了这些概念，就能真正的提高你的CSS能力。这篇文章主要介绍的是关于块格式化上下文（Block Formatting Context），也就是大家俗称的BFC。你可能从未听说过这个术语，但只要你曾经使用过CSS布局，你就可能知道它是什么。理解BFC是什么，它有什么功能，以及如何创建一个BFC是非常有用的，这些能帮助你更好的理解CSS布局。

在这篇文章中，我将会通过几个很熟悉的示例来解释BFC。我还会介绍一个新的display的值，当你理解了BFC是什么的时候，你才能了解为什么需要这个值。也就能更好的理解它的真正意义。

什么是BFC

通过一个简单的float布局示例就能很好的理解BFC的行为。在下面的示例中，我们创建了一个盒子（其实在CSS中，每个元素都是一个盒子），这个盒子中包含了一个设置了浮动的图片和一段文本。如果有足够多的文本内容的时候，文本会围绕着图片（把整个图片包裹起来）。

<!-- HTML -->
 <div class="outer">
    <div class="float">I am a floated element.</div>
    I am text inside the outer box.
 </div> 

/* 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;
}