BFC (块级格式化上下文) 是 CSS 中的一种布局模型，用于控制块级元素的布局和渲染规则。BFC 是一个独立的渲染区域，其中的元素按照一定的规则进行布局，不会影响到外部的布局。
IFC (行内格式化上下文)：IFC 是行内元素的布局模型，用于控制行内元素的布局和渲染规则。IFC 中的行内元素按照一定的规则进行排列，可以通过设置 display: inline-block 或使用表格布局等方式创建 IFC。
Flexbox (弹性盒布局)：Flexbox 是一种基于主轴和交叉轴的布局模型，用于创建灵活的盒子布局。通过使用 display: flex 属性，可以将容器元素变为一个 Flexbox 容器，子元素可以通过设置各种弹性属性来实现自适应的布局。
Grid (网格布局)：Grid 是一种二维网格布局模型，用于将页面划分为行和列，并以网格单元格的形式对元素进行布局。通过使用 display: grid 属性，可以将容器元素变为一个 Grid 容器，可以使用各种网格相关的属性来控制元素的位置和尺寸。
Float (浮动布局)：Float 是一种早期的布局模型，通过设置元素的 float 属性，使元素浮动到指定的方向，其他元素会环绕在其周围。Float 布局常用于创建多列布局和实现文字环绕效果，但也会带来一些布局上的问题，如布局塌陷等。
Table (表格布局)：使用 HTML 表格标签 table 及其相关标签 tr、td 等进行布局。表格布局适用于需要呈现表格结构的场景，但在其他布局需求上较为有限，不推荐将表格布局用于非表格结构的页面布局。
各种布局模型，今天要学习的是 BFC 模型。
1. 什么是BFC模型
BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器，用于控制块级元素的布局和渲染规则
2. BFC 形成的条件
根元素（即 html 元素）或包含它的元素。
浮动元素（元素的 float 属性不为 none）。
绝对定位元素（元素的 position 属性为 absolute 或 fixed）。
行内块元素（元素的 display 属性为 inline-block）。
表格单元格（元素的 display 属性为 table-cell）。
表格标题（元素的 display 属性为 table-caption）。
包含了以上任意一个条件的元素的祖先元素，且该祖先元素的 overflow 属性不为 visible。
3. 解决边界重叠
边界重叠是由于 CSS 盒模型中的外边距合并（margin collapsing）规则所致。当两个垂直相邻的块级元素具有相邻的外边距时，它们的外边距会合并成一个外边距，导致它们之间的间距不是简单地相加，而是取其中较大的外边距值
这里提供了很多边距重叠的案例，最简单的解法就是 overflow:hidden, 形成一个 BFC
4. 解决浮动问题
其实这个问题现在没什么意义了，现在很少还有布局采用浮动布局了，浮动布局会出现父元素会发生高度塌陷，无法正常包裹浮动元素的问题，你可以在后面清除浮动 clear:both, 也可以父元素 BFC，overflow: hidden
当然，文字环绕不知道还使用 float?
5. 总结
也就是说，bfc会创建一个稳定的区域，区域内不会受到外部影响，外部也不会影响内部，从而避免一些浏览器特性导致的问题，最常用的就是 overflow:hidden.