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)
来源:https://blog.csdn.net/fireInNight/article/details/102718058