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

（编辑：湖南网）

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