BFC摘要

概念

BFC全称block formatting context，即块级格式化上下文。BFC是页面中盒模型布局的CSS渲染模式，其定位属于常规文档流。

特点

触发了BFC的区域可以看作是一个隔离的独立容器，里面的元素不会影响外部元素，反之亦然。

具体表现为

• 包住内部的float元素
• 避免与外部的float元素层叠(覆盖重叠)
• 消除外边距折叠

应用

触发BFC布局可以的方式有很多(详见MDN)，比较常见的可以用

• overflow: auto或者是hidden(除了visiable)

• display: flow-root(CSS3)

根据BFC的特点，不难想象创建一个BFC通常是为了方便布局，或者是清除浮动。

更多内容参见

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

https://zhuanlan.zhihu.com/p/25321647