本文介绍的是关于块格式化上下文（BFC），你可能从来没有听说过这个术语，但如果你曾经用CSS做过布局，你可能已经知道它是什么。了解BFC是什么，有什么作用，以及如何创建它才是有用的，可以帮助你了解CSS布局的用法。

 

　　接下来我们将通过一些熟悉的示例来解释BFC的内容。

 

　　我们先来看一下什么是BFC？

 

　　使用简单的float示例最容易理解块级格式化上下文（BFC）的行为。在下面的示例中，将设置一个框，其中包含左侧浮动的图像和一些文本。如果我们有大量文本，它会围绕浮动图像，然后边界将文本和图像围在里面。

 

　　<divclass="outer">

 

　　<divclass="float">Iamafloatedelement.</div>

 

　　Iamtextinsidetheouterbox.

 

　　</div>

 

　　

 

　　.outer{

 

　　border:5pxdottedrgb(214,129,137);

 

　　border-radius:5px;

 

　　width:450px;

 

　　padding:10px;

 

　　margin-bottom:40px;

 

　　}

 

　　.float{

 

　　padding:10px;

 

　　border:5pxsolidrgba(214,129,137,.4);

 

　　border-radius:5px;

 

　　background-color:rgba(233,78,119,.4);

 

　　color:#fff;

 

　　float:left;

 

　　width:200px;

 

　　margin:020px00;

 

　　}








本文转载自中文网