BFC是什么

最新推荐文章于 2024-08-03 17:34:58 发布

和蔼的阿木木o

最新推荐文章于 2024-08-03 17:34:58 发布

阅读量81

点赞数

分类专栏： css html 文章标签：前端大数据 html

本文链接：https://blog.csdn.net/m0_59642141/article/details/125442669

版权

html 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

css

16 篇文章 0 订阅

订阅专栏

BFC是什么

BFC 全称为块格式化上下文 (Block Formatting Context) 。

官方介绍

MDN

一个块格式化上下文（block formatting context）是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
一个块格式化上下文由以下之一创建：

根元素或其它包含它的元素
浮动元素 (元素的 float 不是 none)
绝对定位元素 (元素具有 position 为 absolute 或 fixed)
内联块 (元素具有 display: inline-block)
表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
具有overflow 且值不是 visible 的块元素，
display: flow-root
column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。