css中的中BFC（Block Formatting Context）详解

css中总是存在一些古老而又强大的特性，虽然css3，以及即将面世的css4极大节约了我们的开发成本，但是根植于css2中那些巧妙的技巧仍然能够令我们为之惊叹。今天，我们就来学习一个功能非常强大，兼容性也非常好的知识点BFC（格式化上下文）*。

一、何为BFC

BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器，默认情况下只有根元素（即body）一个块级上下文。

二、形成BFC的条件

       1、浮动元素，float除none以外的值。
       2、定位元素position(absolute,fixed)。
       3、display 为以下其中之一的值 inline-block，table-cell，table-caption；
       4、overflow 除了 visible 以外的值（hidden，auto，scroll）；

三、BFC的特性

       1.内部的Box会在垂直方向上一个接一个的放置。
       2.垂直方向上的距离由margin决定
       3.bfc的区域不会与float的元素区域重叠。
       4.计算bfc的高度时，浮动元素也参与计算
       5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
       如果您之前对BFC的不是很了解的话，那么上面的几条特性可能会让您感到困惑。我们下面将逐条进行叙述。

四、实践是检验真理的唯一标准

1、BFC中的盒子对齐

特性的第一条是：内部的Box（块级元素）会在垂直方向上一个接一个的放置。（这条特性不必纠结，即便不在BFC里块级盒子也会垂直排列）

2、外边距折叠

特性的第二条：垂直方向上的距离由margin决定
在常规文档流中，两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，而是以较大的为准。

正常文档流

<div class="container">
     <div class="box1"></div>
     <div class="box2"></div>
</div>

<style>
.container {
    overflow: hidden;
    width: 100px;
    height: 100px;
    background-color: red;
}
        
.box1 {
     height: 20px;
     margin: 10px 0;
     background-color: green;
}
        
.box2 {
     height: 20px;
     margin: 20px 0;
     background-color: green;
}
</style>

这里我门可以看到，第一个子盒子有上边距（不会发生margin穿透的问题）；两个子盒子的垂直距离为20px而不是30px，因为垂直外边距会折叠，间距以较大的为准。

那么有没有方法让垂直外边距不折叠呢？答案是：有。特性的第5条就说了：bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素，同样外面的元素不会影响到BFC内的元素。所以就让box1或box2再处于另一个BFC中就行了。

BFC文档流

<div class="container">
     <div class="wrapper">
         <div class="box1"></div>
     </div>
     <div class="box2"></div>
</div>
<style>
.container {
   overflow: hidden;
   width: 100px;
   height: 100px;
   background-color: red;
}
    
.wrapper {
    overflow: hidden;
}
    
.box1 {
     height: 20px;
     margin: 10px 0;
     background-color: green;
}
    
.box2 {
    height: 20px;
    margin: 20px 0;
    background-color: green;
}
</style>

3、不被浮动元素覆盖

以常见的两栏布局为例。
左边固定宽度，右边不设宽，因此右边的宽度自适应，随浏览器窗口大小的变化而变化。

<div class="column"></div>
<div class="column"></div>

<style>
.column:nth-of-type(1) {
      float: left;
      width: 200px;
      height: 300px;
      margin-right: 10px;
      background-color: red;
}
        
.column:nth-of-type(2) {
      overflow: hidden;/*创建bfc */
      height: 300px;
      background-color: purple;
}
</style>

还有三栏布局。
左右两边固定宽度，中间不设宽，因此中间的宽度自适应，随浏览器的大小变化而变化。

BFC实现三栏布局

<div class="contain">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>
<style>
.column:nth-of-type(1),
.column:nth-of-type(2) {
     float: left;
     width: 100px;
     height: 300px;
     background-color: green;
}
        
.column:nth-of-type(2) {
     float: right;
}
        
.column:nth-of-type(3) {
      overflow: hidden;  /*创建bfc*/
      height: 300px;
      background-color: red;
}
</style>

也可以用来防止字体环绕：
众所周知，浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。这也是一个比较有趣的特性。

html

<div class="left"></div>
<p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
       你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
       你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
</p>

css
（1）环绕

.left {
     float: left;
     width: 100px;
     height: 100px;
     background-color: yellow;
}
        
p {
      background-color: green;
      /* overflow: hidden; */
}

（2）利用bfc防止环绕

.left {
     float: left;
     width: 100px;
     height: 100px;
     background-color: yellow;
}
        
p {
     background-color: green;
     overflow: hidden;
}

4、BFC包含浮动的块

我们经常会在父元素里设置某个子元素浮动。浮动后，子元素脱离了文档流，使得父元素无法包住这个浮动的子元素。我们通常在父元素上设置一个clearfix的伪元素来清除浮动；同样，我们可以利用BFC可以包含浮动这一特性来清除浮动。

当给.parent设置overflow:hidden时，实际上创建了一个超级属性BFC，此超级属性反过来决定了height:auto是如何计算的。在“BFC布局规则”中提到：计算BFC的高度时，浮动元素也参与计算。因此，父元素在计算其高度时，加入了浮动元素的高度，“顺便”达成了清除浮动的目标，所以父元素就包裹住了子元素。

除了给.parent设置overflow:hidden，我们还可以设置display:inline-block、position:absolute、float:left等方式来创建一个BFC，从而达到包裹浮动子元素的效果（具体使用哪种方法要看项目需求）.