BFC （Block Formatting Context）译为块格式化上下文，是CSS渲染中的一块独立渲染区域， 计算高度的时候会算上内部的浮动元素。一个BFC区域内部的元素布局排列不会影响外部区域元素的布局排列。根据这些特点，我们常常用来解决一些诸如相邻块外边距折叠，清除浮动，浮动塌陷，浮动块和普通块元素重叠等元素之间布局排列的问题。
下列方式会创建块格式化上下文：
- 根元素(
<html>) - 浮动元素（元素的
float不是none） - 绝对定位元素（元素的
position为absolute或fixed） - 行内块元素（元素的
display为inline-block） - 表格单元格（元素的
display为table-cell，HTML表格单元格默认为该值） - 表格标题（元素的
display为table-caption，HTML表格标题默认为该值） - 匿名表格单元格元素（元素的
display为table、table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或inline-table） overflow值不为visible的块元素display值为flow-root的元素contain值为layout、content或 paint 的元素- 弹性元素（
display为flex或inline-flex元素的直接子元素） - 网格元素（
display为grid或inline-grid元素的直接子元素） - 多列容器（元素的
column-count或column-width不为auto，包括column-count为1）
下面我们来看利用BFC特性解决的问题实例：
1 相邻块外边距折叠：
如上图所示第一个block的下边距和第二个block的上边距发生了折叠导致期望的60px间距变成了实际渲染的30px间距。这里我们把两个元素分别放入一个BFC块里面就可以渲染出期望的60px了。如下图所示：
2 浮动块和普通块元素重叠：
如上图所示，第一个block因为设置了左浮动脱离了文档流导致第二个block向上占位，从而让第一个block遮住了第二个block。
这里有两个解决BFC的解决方案，要么就是直接设置第二个block为BFC，要么就在第二个block外面包一个BFC块。两种方案的实例见下图：
3 浮动塌陷：
container 容器里面的block块设置了左浮动并且block块的高度超过了内容高度，container无法照block的高度撑开，就形成了塌陷。下面我们把container设置成BFC就可以让其高度撑开（因为浮动元素也会参与BFC的高度计算），示例图如下
4 清除浮动：
block块设置为左浮动之后，底下的文字就自动向上占位了。这时候可以把block放到一个符合BFC的块里面即可消除block浮动对外部文字的影响（因为BFC内部元素的布局排列不会影响外部元素的布局排列），如下图所示：
这下BFC的要点就捋完了。结合实际工作情况，flex的弹性盒子是我用的比较多的。要把一个块级元素设为BFC一般不会去设overflow,原因有两点，其一是overflow常用于设置滚动条，用来设置BFC的话用意不明，其二是如果你只想要BFC的话，overflow会有一些副作用（比如滚动条或者一些剪切的阴影）。这里建议用flow-root来做BFC,这个是没用副作用的。
196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
