CSS中的BFC

这篇笔记记录了BFC的概念，特点，创建BFC的方法，应用等。

1、BFC的概念

Block Formatting Context，块级格式化上下文。可以理解成一个独立的容器，与外界互不相干，互不打扰。

2、BFC的特点

（1）、相邻块级，垂直方向上的边距重叠

（2）、BFC区域不会与浮动元素重叠（清楚文字环绕）

（3）、BFC的独立性，里外互不影响

（4）、BFC块内的浮动元素会参与高度计算（无高度塌陷）

3、创建BFC的方法

（1）、设置float不为none

（2）、设置overflow不为none

（3）、设置display为inline-block，table-cell,table-caption

（4）、设置position不为static或者relative

4、BFC的应用场景

（1）、清除文字环绕

（2）、解决外边距重合

（4）、解决与浮动元素重叠（常见两栏布局，右边自适应，三栏布局中间自适应）

（5）、解决高度塌陷，即浮动子元素参与高度计算。

以上为理论总结，更多实际案例可以参考另外一篇博客CSS中的BFC详解