关于BFC的理解与运用

 经常在逛博客或者一些技术社区的时候看到BFC这个概念，大体上也知道是什么，不过过段时间印象又很模糊，因此乘着有空写博客记录一下。

 

BFC的概念及特性

BFC全名叫block formatting context（块级格式上下文），听着名字挺懵，它是一个独立的渲染区域，具体我们可以认为它是一种环境，若是某个盒子拥有了这个环境，那么它里面的盒子就不会影响到其外面的盒子，其外面的盒子也不会影响到其里面的盒子，就像是一座围城，里面的人出不来，外面的人出不去。

 

BFC的触发方式（以下方式满足其一即可）

1.body 根元素

2.浮动元素：float 除 none 以外的值

3.绝对定位元素：position (absolute、fixed)

4.display 为 inline-block、table-cells、flex

5.overflow 除了 visible 以外的值 (hidden、auto、scroll)

6.display:flow-root 

BFC的布局特性的介绍，问题以及应用

1.拥有BFC的盒子的子盒子会在垂直方向紧密贴合排放

2.同一个 BFC 下相邻盒子外边距会发生重叠

.box1,.box2 {
    width: 200px;
    height: 150px;
    background-color: white;
    border:1px solid black;
    margin:100px;
}           
 

从上面可以看出我们给每个盒子都设置了100的外边距，按道理来说box2和box1之间应该是200才对（box1的margin-bottom和bo2的margin-top各一百），但它确实是100，这里就发生了我们常遇到的外边距合并问题，BFC产生的问题，同样也可以用BFC解决，即将两个盒子放在不同BFC环境中即可，如下图（这只是实现不同BFC的一种方式，具体方式上面有）

3.BFC可以完全包含各种子元素，包括浮动元素

我们平时可能会经常遇到一个问题，就是某个元素浮动后，父元素没有设置宽高的情况下，父元素会坍塌，即下图

这里父盒子没有设置宽高，仅有几个字体撑开一点高度，反观子盒子离父盒子有一段距离，这就是所谓的父元素坍塌，这经常困扰着我们，因为我们让某个元素作为另一个元素的子盒子，就是想其不影响其他盒子，所以利用BFC的特性：父盒子中的子盒子完全与外界隔离可以完美解决这个问题，我们给父盒子加一句：

overflow:hidden

效果如下：

4.BFC可以防止文档流盒子被浮动流盒子覆盖

大家都知道设置了浮动的盒子是脱离文档流动的，但是总所周知其脱离实际上不是完全脱离，因为他依然会影响文档流中文本的显示，如下所示：

文档流盒子box2的文本并没有被浮动盒子box1覆盖，而是环绕其周围，这个问题同样可以用BFC来解决，因为BFC的宗旨是盒子里面的元素不受外界影响，上图显然box2中的文字受到了影响，所以给box2设置BFC，效果如下：

此时box1和box2完全分隔开互不影响，这个特性常用来实现自适应两栏布局，即左边宽度固定，右边大小自适应。

 

总结：总之只要牢记一点：拥有BFC的盒子里面的内容和外面的内容完全互不影响，只要记住这个其他的都好理解。