什么是块级格式化上下文（BFC），如何工作？

轩辕小不懂发布于 2021-12-06 16:13

阅读 377

答案 1

分类：WEB前端开发

Nen 2021-12-06 16:26

- 程序员

1.规范解释

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成

块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

2.通俗解释：

BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境

中的物品。

如果一个元素符合触发BFC的条件，则该元素中的布局不受外部影响。

浮动元素会创建BFC，所以浮动元素内部子元素主要受浮动元素影响，两个浮动元素之间是互不影响的。

3.创建方式：

根元素或包含根元素的元素

浮动元素 float ＝ left | right 或 inherit（≠ none）

绝对定位元素 position ＝ absolute 或 fixed

display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption

overflow ＝ hidden | auto 或 scroll (≠ visible)