前端面经中总能看到的BFC要了解BFC之前我们先要了解一下视觉格式化模型视觉格式化模型视觉格式化模型（Visual

要了解BFC之前我们先要了解一下视觉格式化模型

视觉格式化模型（Visual Formatting Model）是 CSS 用于处理和计算文档中元素的布局和显示方式的一种规则体系。它就像是一个幕后的 “导演”，规定了元素在页面上如何排列、占据多大空间、相互之间的位置关系等视觉呈现细节。

盒模型：HTML 元素在布局中被视为盒子，包括内容区、内边距（内容与边框间的空间）、边框、外边距（与相邻元素的空间）。例如，一个div元素设置了宽、高、内边距、边框和外边距后，其总宽高要把这些部分都算进去。
包含块：是决定元素位置和大小的参考区域。多数元素的包含块是最近的块级祖先元素，绝对定位元素的包含块确定方式不同，一般是最近的非static定位祖先元素，没有的话可能是<html>。

布局类型
- 块级布局：块级元素（如<h1>、<p>、<div>）垂直排列，占父元素一整行，可设高、外边距等来调整位置间隔。
- 行内布局：行内元素（如<span>、<a>）在一行内水平排列，宽高由内容决定，多个行内元素在一行中排列，会根据内容自动调整宽高。
- 浮动布局：元素设置浮动（float: left或float: right）后脱离文档流，向左或向右浮动，周围元素环绕排列，可用于多栏布局。
- 定位布局：通过设置position属性实现不同效果。绝对定位和固定定位脱离文档流，可用top、bottom、left、right精确控制位置；相对定位是相对于自身正常位置偏移。
格式化上下文
- 块级格式化上下文（BFC） ：独立布局区域，内部块级元素按特定规则布局，不受外部浮动元素干扰，内部浮动元素也不影响外部。
- 内联格式化上下文（IFC） ：用于行内元素布局，从左到右排列，排不下换行，垂直对齐方式受规则约束，可通过vertical - alignment属性调整。

视觉格式化模型是一套完整的规则体系，用于处理页面元素的布局和显示。BFC（块级格式化上下文）是这个体系中的一个重要概念

BFC 就像是一个 “小盒子”，这个 “小盒子” 里有自己的一套布局规则。在这个盒子里的块级元素就按照这些规则来摆放，而且这个盒子里的布局不会影响到盒子外面的元素，外面的元素也不太容易影响到盒子里面的布局。

用浮动来产生：如果一个元素设置了float属性，让它向左（left）或者向右（right）浮动，这个元素就开启了一个 BFC。就好比这个元素自己跑到一个独立的小空间里，还能带着它里面的元素一起按照新规则布局。
用绝对定位来产生：当一个元素的position属性设成absolute（绝对定位）或者fixed（固定定位）的时候，它也会开启一个 BFC。这个时候它就像飘起来一样，脱离了原来的布局，自己形成了一个新的布局小世界。
用display属性的一些值来产生：
- 当display设成inline - block时，元素就像一个有点特别的盒子。它可以和其他元素在一行里排着（像行内元素），但又有块级元素的一些特点，同时也开启了 BFC。
- 还有table - cell（像表格里的单元格一样）、table - caption、flex、inline - flex、grid、inline - grid这些display的值，也能让元素开启 BFC。
用overflow属性来产生（除了visible这个值） ：如果overflow设成hidden（超出部分隐藏）、auto（自动出现滚动条）或者scroll（总是有滚动条），就会开启一个 BFC。这就好比给元素围了一个小栅栏，里面的元素布局就有新规则了。

竖着排：在 BFC 这个小盒子里，块级元素就像排队一样，一个挨着一个在垂直方向上排好。比如有几个小方块（元素）在一个 BFC 里，它们就会从上到下依次排列。
外边距不折叠：正常情况下，两个相邻的块级盒子的上下外边距会 “粘” 在一起，变成一个外边距（这叫外边距折叠）。但在 BFC 里，这个情况就不一样了。如果一个元素在 BFC 里，它的外边距就不会和外面元素的外边距折叠。
左边界对齐：在 BFC 里的元素，它的左边距会和这个 BFC 盒子的左边对齐（如果是从左往右排版的话，反过来也一样）。就好像这些元素都乖乖地靠在盒子的左边。
不和浮动元素重叠：BFC 这个小盒子不会和浮动的元素重叠。比如有一个浮动的小方块在旁边，BFC 盒子里的元素就会自动躲开它，不会和它叠在一起。

清除浮动：在网页布局的时候，如果有元素浮动了，它的父元素可能会出现高度塌陷的问题，就像一个装东西的盒子，东西飘起来了，盒子就不知道自己该多高了。这时候触发父元素的 BFC，就能让父元素根据浮动元素的高度来调整自己的高度，就解决了这个问题。
做两列布局：可以让一列元素浮动，另一列元素触发 BFC。这样浮动的那一列可以固定宽度，而触发 BFC 的那一列就能自适应宽度，还能躲开浮动的那一列，不会重叠，就可以做出两列的网页布局。