CSS BFC总结

Authors
  • avatar
    作者
    孙一凡

BFC 是什么

  • BFC 全称是 Block Format Context （块级格式化上下文）

  • BFC 是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context 提供了一个环境，HTML 元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成 BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个 BFC 就是一个独立的行政单位的意思。也可以说 BFC 就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里 box 的布局，与这个容器外的毫不相干。

常见的定位方案

普通流

  • 元素按照 HTML 中的先后位置至上而下布局
  • 行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行
  • 所有元素默认都是普通流定位

浮动

  • 元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或者右边偏移

绝对定位

  • 元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响
BFC属于普通流

BFC 有着自己的渲染区域和渲染规则

BFC 可以看做元素的一种属性。当元素拥有了 BFC 这个属性的时候，这个元素就可以看作是隔离了的独立容器。容器里面的元素不会在布局上影响外面的元素

触发 BFC（为元素添加 BFC 属性）

  1. 根元素<html>
  2. 浮动元素（元素的 float 不是 none）
  3. 绝对定位元素（元素的 position 为 absolute 或者 fixed)
  4. display 是 inline-block,table-cell,table-caption,table,table-row,table-row-group,table- header-group,table-footer- group,inline-table,flow- root,flex,inline-flex,grid,inline-grid
  5. overflow 不是 visible 的块元素
  6. contain 值为 layout, content, paint 的元素
  7. 多列容器（元素的 column-count 或 column-width 不是 auto，包括 column-count 为 1)

BFC 特性及应用

  1. 避免外边距重叠
  2. 清除浮动
  3. 阻止元素被浮动元素覆盖