[分享]CSS中BFC到底什么意思

在CSS中，BFC是指“块级格式化上下文”（Block Formatting Context）的缩写，是一种CSS渲染机制。通俗来说，BFC就是一个独立的渲染区域，其中元素按照一定规则进行布局。BFC...

在CSS中，BFC是指“块级格式化上下文”（Block Formatting Context）的缩写，是一种CSS渲染机制。

通俗来说，BFC就是一个独立的渲染区域，其中元素按照一定规则进行布局。BFC在页面中占据一块空间，可以影响到布局和浮动等属性。

BFC的形成有多种方式，主要有以下几种：

 1. 根元素或具有根元素属性（如overflow:hidden）的元素；
    2. 浮动元素（float不为none）；
    3. 绝对定位元素（position为absolute或fixed）；
    4. 行内块元素（display:inline-block）；
    5. 表格单元格（table-cell）元素；
    6. 表格标题和表格脚注（table-caption）元素； 

当一个元素生成BFC之后，它的布局将受到很大的影响。在BFC中，元素的布局规则如下：

 1. 内部的所有元素会按照垂直方向依次排列；
    2. 针对浮动元素、绝对定位元素等，不会对BFC中外部的元素产生影响；
    3. BFC在宽度上会自动收缩，以防止相邻元素之间产生间隔；
    4. 递归产生新的BFC。（例如：一个元素内部的另一个元素也生成了BFC，那么这个内部元素的布局就与外部元素无关）； 

总之，BFC是一种具有独立布局规则的渲染机制，使用BFC可以避免一些由于浮动、定位等属性造成的布局问题，是前端开发中的重要概念。