块格式化上下文(Block Formatting Context,BFC)

它是一个独立的渲染区域,只有Block-level box参与(在下面有解释), 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

BFC 可以简单的理解为某个元素的一个 CSS 属性,只不过这个属性不能被开发者显式的修改,拥有这个属性的元素对内部元素和外部元素会表现出一些特性,这就是BFC。具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。

触发BFC

  1. html 根元素
  2. 浮动元素:float 除 none 以外的值
  3. 绝对定位元素:position (absolute、fixed)
  4. display 为 inline-block、table-cells、flex
  5. overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC特性

  1. 盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠;
  2. BFC的区域不会与有float的元素的区域重叠 (可以防止被float元素遮挡)
  3. 计算BFC的高度时,浮动子元素也参与计算;(如果一个div包裹一个float的div,因为float的div脱离了文档流,所以外层的div就没有宽高只有border,而触发外层div的bfc的话就可以让float元素撑开外层元素)

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