理解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;
}