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

（编辑：河北网）

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