HTML元素BFC特性笔记

BFC(block formatting context): 块级格式化上下文

表现形式是：元素形成了一个封闭空间，其内的子元素和外部文档流互不影响。
主要可以解决两个问题：浮动影响、父子元素上下margin合并。
产生方式：
1、根元素自带；
2、float属性计算值为：left、right；
3、overflow属性计算值为： auto、scroll、hidden(常用)
4、display属性计算值为：table-cell、table-caption、inline-block
5、position属性计算值为： absolute、fixed
PS:之所以说计算值是因为，inherit变量动态继承父元素属性值，initial变量重置为初始值，unset变量先看inherit再看initial

1、清除浮动影响

在布局方面，和margin相比：
如果左边浮动元素的大小变化，margin需要重新设置来让出合适位置，而BFC则会自适应。

2、阻止父子元素margin合并

拥有BFC特性的元素，它的上下margin不会和它的子元素的margin进行合并，当然它的子元素间的margin合并不受影响。

参考文档

1、《CSS世界》 作者：张鑫旭 第六章第三小节（6.3）