聊聊BFC

BFC是前端学习中非常重要的知识点，本文将介绍BFC概念，触发方式，和作用

BFC的概念

BFC全称Block Fromatting Context，含义为块级格式化上下文。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。通俗地讲，就是BFC容器里面和外面的布局互不影响。

触发方式

1.overflow不为visible
2.position不为relative，static
3.display:inline-block，table-cell, table-caption, flex, inline-flex
4.float:非none
5.根元素

值得一提的是，以上每种方法都能创建BFC，但是有些会有一些副作用：
1、display: table 可能引发响应性问题
2、overflow: scroll 可能产生多余的滚动条
3、float: left 将把元素移至左侧，并被其他元素环绕
4、overflow: hidden 将裁切溢出元素
因此，要根据实际的情况去创建BFC

BFC的作用

避免外边距折叠

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

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

折叠的必要条件：margin必须是邻接的!

由此可知，只要将相邻盒子放在不同的BFC中即可解决问题。

解决高度塌陷

float的非none值会让元素脱离文档流，如果父元素容器没有足够的高度，那么将无法包住浮动元素，父元素也无法被撑开。这里可以给父元素创建BFC来解决。BFC可以包含浮动，也可以被浮动元素撑开，这样容器可以包住浮动子元素，并且其高度会扩展至包住其子元素，在这个新的BFC中浮动元素又回归到页面的常规流之中了。

避免文字环绕

对于浮动元素，可能会造成文字环绕的情况(Figure1)，但这并不是我们想要的布局(Figure2才是想要的)。要解决这个问题，我们可以用外边距，但也可以用BFC。
这里给右边的P元素创建BFC，使其和左边的DIV互不影响，即可避免文字环绕