说说对 BFC （Block formatting contexts）的理解

[FunnyZ]

说说对 BFC （Block formatting contexts）的理解

[artdong]

BFC是什么？

• BFC（Block Formatting Context）即“块级格式化上下文”

• IFC（Inline Formatting Context）即“行内格式化上下文”

• BFC是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个独立的渲染区域（作用范围或者盒子），HTML元素在这个独立的渲染区域中按照一定规则进行布局。并且与这个渲染区域外部毫不相干。

如何产生BFC

• 浮动元素：float 除 none 以外的值。
• 绝对定位元素：position (absolute、fixed)。
• display 为 inline-block、table-cells、flex。
• overflow 除了 visible 以外的值。