fe-interview
fe-interview copied to clipboard
说说对 BFC (Block formatting contexts)的理解
说说对 BFC (Block formatting contexts)的理解
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 以外的值。