理解CSS布局和BFC，真正提高你的CSS布局能力

CSS布局中有一些概念，一旦你理解了它们，就能真正提高你的 CSS 布局能力。本文是关于块格式化上下文(BFC)的。你可能从未听说过这个术语，但是如果你曾经用CSS做过布局，你可能知道它是什么，理解什么是 BFC，怎么工作以及如何创建 BFC 非常有用，这些可以帮助你理解CSS中的布局是如何工作的。

在本文中，通过熟悉的示例来解释什么是 BFC。然后说明 display 的一个新值，只有当你理解了什么是 BFC 以及为什么需要它时，它才有意义。

什么是 BFC

在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

块格式化上下文(BFC)的行为通过一个简单的float示例很容易理解。在下面的示例中，我有一个框，其中包含向左浮动的图像和一些文本。如果我们有足够多的文本，它会环绕浮动的图像和边框，然后环绕整个区域。

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

如果我删除了一些文本，那么就没有足够的内容来包围图像，而且由于浮动被从文档流中脱离，所以边框会上升，并在图像下方，直到文本的高度。

这是因为当我们浮动一个元素时，文本所在的框的宽度保持不变，为给浮动元素腾出空间而缩短的是文本的行框。这就是为什么背景和边框会出现在浮动后面的原因。

我们通常有两种方法来解决这个布局问题。一种方法是使用 clearfix hack，它的作用是在文本和图像下面插入一个元素，并将其设置为 clear:both。另一种方法是使用 overflow 属性，其值不是缺省值 visible。

.outer {  
  overflow: auto;  
} 

查看演示

overflow 以这种方式工作的原因是，使用 visible 的初值以外的任何值都会创建一个块格式化上下文，而 BFC 的一个特性是它包含浮动。

BFC 是布局中的一个迷你布局

你可以将 BFC 看作是页面内的一个迷你布局。一旦一个元素创建了一个 BFC，它就包含了所有的内容。正如我们所看到的，这包括浮动的元素，它们不再从盒子底部伸出来。BFC 还会导致一些其他有用的行为。

BFC 可以防止 margin 折叠

了解边距合并是另一个被低估的 CSS 技能。在下一个示例中，假设有一个背景颜色为灰色的 div。

这个 div 包含两个标签 p。外部 div 元素的 margin-bottom 为 40 像素，标签 p 的顶部和底部 margin 都是 20 像素。

// html  
<div class="outer">  
  <p>I am paragraph one and I have a margin top and bottom of 20px;</p>  
  <p>I am paragraph one and I have a margin top and bottom of 20px;</p>  
</div>  
// css  
.outer {  
   background-color: #ccc;  
  margin: 0 0 40px 0;  
}  
p {  
  padding: 0;  
  margin: 20px 0 20px 0;  
  background-color: rgb(233,78,119);  
  color: #fff;  
} 

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!