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

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。折叠的结果按照如下规则计算：

1.  两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2.  两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3.  两个外边距一正一负时，折叠结果是两者的相加的和。

产生折叠的必备条件：margin必须是邻接的!

如果我们把盒子设为 BFC，它现在包含了标签 p 和它们的边距，这样它们就不会折叠，我们可以看到边距后面容器的灰色背景。

.outer {  
  background-color: #ccc;  
  margin: 0 0 40px 0;  
  overflow: auto;  
} 

查看演示

再一次，BFC 的工作是把东西装在盒子里，防止它们从盒子里跑出来。

BFC 可以阻止元素被浮动元素覆盖

你将熟悉 BFC 的这种行为，因为使用浮动的任何列类型布局都是这样工作的。如果一个项目创建了一个 BFC，那么该项目将不会包裹任何浮动元素。在下面的例子中，有如下 html 结构：

<div class="outer"> 
  <div class="float">I am a floated element.</div>  
  <div class="text">I am text</div>  
</div> 

带有 float 类的项被向左浮动，因此 div 中的文本在它环绕 float 之后。

我可以通过将包裹文本的 div 设置为 BFC 来防止这种包裹行为。

.text {  
  overflow: auto;  
} 

这实际上是我们创建具有多个列的浮动布局的方法。浮动项还为该项创建了一个 BFC，因此，如果右边的列比左边的列高，那么我们的列就不会相互环绕。

查看演示

在多列布局中使用 BFC

如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。但如果我们在多列布局中的最后一列里创建一个新的BFC，它将总是占据其他列先占位完毕后剩下的空间。

例如：

<div class="container">  
    <div class="column">column 1</div>  
    <div class="column">column 2</div>  
    <div class="column">column 3</div>  
</div> 

对应的CSS：

.column {  
    width: 31.33%;  
    background-color: green;  
    float: left;  
    margin: 0 1%;  
}  
.column:last-child {  
  float: none;  
} 

（编辑：核心网）

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