一、什么是BFC
BFC，全称Block Formatting Context，即块级格式上下文。我的理解，它其实就是页面上的一块渲染区域，有自己的渲染规则，指定了自己的子元素的定位和相互关系。我们先来看看W3C里对它的定义：
- 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
- 在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
- 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。
上面这段刚开始我也是看的晕晕乎乎的，现在把它分解成下面六点来解读（我习惯记忆为一要点二浮动三子元素）：
- BFC就是页面上的一个隔离的独立布局环境，可以想象（注意它并不是一个元素）为一个容器，容器里面的子元素不会影响到外面元素，而BFC外的元素也不会干扰到内部的元素。
- 计算BFC的高度时，浮动子元素也参与计算。
- BFC的区域不会与float的元素区域重叠。
- 在BFC内部的盒子会在垂直方向上一个接一个的放置。
- 每个元素的左外边距与包含块的左边界相接触（对于从右到左的格式来说，则触碰到右边缘），即使浮动元素也是如此。
- 属于同一个BFC的两个相邻盒子的margin会发生合并。
- 第一点讲的是BFC最主要的特征。他的特征就是一个独立环境，内外互不影响。无论内部如何进行布局浮动等，都不会影响到外部元素的排版，同样外部也无法跨越这个BFC对其里面产生影响。
- 第二和三是关于浮动的。先讲第二点，当一个普通的块级元素包含浮动元素时，这个普通的块级元素由于感知不到该浮动子元素的存在，会发生高度坍塌。而当这个块级元素触发BFC之后（下面会将如何触发BFC），他的高度就会把浮动元素的高度计算进去，而不再发生坍塌。所以也可以利用这点来清除浮动。
- 第三点是相对于外面的浮动元素来讲。同样的，由于非浮动的块级元素无法感知浮动元素的存在，所以当布局中已经存在一个浮动元素，此时再生成一个块级元素时，块级元素会当作那个区域没有其他元素仍旧放上去，两者就会发生重叠。但如果这个块级元素转换为BFC之后，则能感知浮动元素的存在，则直接放置在浮动元素之后，而不再发生重叠。
- 第四五六是关于BFC的内部元素布局和相互关系的。先看看第四点，其实这点很简单明了，由于根元素本身也满足BFC，所以平时我们看到的布局也是满足第四点的，也是从上往下的一行一行放置，一行满了再下一行。
- 第五点：盒模型的几个要素包括margin、border、padding和content，而第五点讲的每个元素的左外边距（margin）与包含块的左边界（border）相接触，也就是说所有内部元素（包括他们的margin）都被圈在父元素的border内部的，当父元素满足BFC时，父元素的margin也不再与内部元素的margin发生合并，内部元素也无法再超出父元素（除非子元素设置了absolute则可以超出，因为若子元素设置了absolute若要相对父元素则父元素要设置了relative就不再满足BFC，若父元素不设置relative则此时子元素不再认为他是父亲而一层层往上找到另一个设置了relative的父元素）。
- 而第六点的margin合并，想了解详细的可以看这篇文章。
二、怎么触发BFC
- position除relative以外的值（absolute，fixed）。
- display为inline-block, table-cell, table-caption, flex,inline-flex其中之一值。
- float除none以外的值。
- overflow除visible以外的值（hidden，auto，scroll）。
- 根元素。
设置上面的属性的时候也要注意结合本身需求，比如为了触发BFC可以设置overflow:hidden，但也会导致一些悬浮超出的内容无法显示。此处介绍一个css的新属性值，display:flow-root，这个值就是专门设置元素触发BFC的，而且不会带来副作用，所以还是比较好用，不过一些旧版本浏览器可能无法支持。
三、BFC有什么用
- 清浮动
正如上面第二点讲到的 “计算BFC的高度时，浮动子元素也参与计算" ，所以我们可以用BFC来解决浮动导致的父元素高度坍塌问题。例子如下：
浮动带来的高度坍塌
当子元素设置浮动时，父元素会感知不到内部子元素的存在，发生高度坍塌。如下图，父元素没有显示（若显示背景色应该为灰色）。当我们给父元素加个overflow:hidden使父元素触发BFC时，此时父元素的高度就不再为0而是计算包含了浮动元素的高度。
BFC清浮动
- 解决重叠问题（实现两栏布局等）
根据上面的第三点，”BFC的区域不会与float的元素区域重叠“，所以我们可以用BFC来解决由于浮动元素无法感知普通块级元素带来的重叠问题。例子如下：
浮动重叠问题
如图，由于普通块级元素（灰色）无法感知到浮动元素（绿色）的存在，所以渲染的时候仍然从左上角顶点开始渲染，而浮动元素盖在了上面发生了重叠。而当设置了overflow:hidden触发BFC之后，由于BFC的区域不会与float的元素区域重叠，所以渲染的时候则避开了绿色浮动块，从而实现了两栏布局。
BFC解决重叠问题
- 解决边距合并问题（可以先看看我的这篇文章）
其实上面的第五点解读就可以看出，当父元素触发了BFC之后，父子元素就不会再发生外边距合并。而边距合并不止发生在父子间，还有兄弟间和元素自身，而发生边距合并的条件之一必须在同一个BFC下，所以我们可以通过让两个发生边距合并的元素处于不同BFC来解决边距合并问题。例子如下：
边距合并
上面绿色块元素的margin-bottom:30px下面的margin-top:30px，按道理两者间的间距应该为60px，但实际却只有30px。这是因为BFC的第6点”属于同一个BFC的两个相邻盒子的margin会发生合并“，所以我们只要使其中一个元素触发新的BFC则两者不在同个BFC下自然就不合并了。
BFC解决边距合并
网友评论