BFC的全称是Block formatting context直译为"块级格式化上下文"。是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。
BFC的产生因素为:根元素,浮动,绝对定位元素,inline-block, table-cell, table-caption,和overflow的值不为visible的元素。如下图。
而关于float元素中产生的产生的块级元素浮动,对于拥有BFC属性的样式和内联元素(inline)以及文本,都不会被float块级元素所覆盖,也就是在实际应用,前者会跟后者同时完全展示,而非折叠或者覆盖展示。