前言

BFC是一套渲染机制，是指内容会显示到容器里面，而不是到容器外面。相当于在元素外面创建一堵墙，让元素内外的的内容不会互相影响。

BFC概念解释

官方的解释是块级格式化的上下文，主要是指在渲染的过程中形成块级的盒子状的渲染区域，包括本身以及间距等。在整个的渲染过程中，不会互相影响的原则。

以下列举的为常规的BFC的创建方式：

  • overflow:hidden,不为visible即可
  • position值不为static,relative
  • float值不为none

  • display: table-cell table-caption inline-block,flex

    参考文档

  • 学习BFC

  • css中的BFC