介绍BFC及其应用定义BFC（BlockFormattingContext）译为“块级格式化上下文”。它是一个独立的渲染区域，只有（Block-levelbox）块级框参与。BFC规定了内部盒子如何布局，以及盒子之间的关系和功能。说明Box（盒子）Box盒子是CSS布局的基本单位。在CSS中，我们广泛使用两种“盒子”——块级盒子和行内盒子。HTML元素的type和display属性决定了一个Box（盒子）的类型。不同类型的Boxes将参与不同的FormattingContexts。格式化上下文（FormattingContext）格式化上下文（FormattingContext）是页面中的一个渲染区域，它决定了子元素将如何布局，以及子元素之间的关系和作用。BlockFormattingContext，块级格式化上下文，是FormattingContext（格式化上下文）的一种，只有（Block-level-box）块级框参与；对应InlineFormattingContext（IFC内联格式化上下文）。CSS3之后还有GFC（Grid）和FFC（Flex）。规则内的框将垂直堆叠。BFC是页面上的一个独立容器。BFC内部子元素的布局不会影响外部元素的布局。对于内框，垂直距离由边距控制。相邻内部框的边距将重叠。BFC的区域不会和浮动框重叠。在计算BFC的高度时，浮动元素也参与计算。应用程序清除浮动（让浮动元素的父元素触发BFC）以防止内框边距合并到同一个BFC中。自适应两列布局防止元素显示(float)浮动元素叠加如何创建(触发)BFC根元素浮动元素定位元素行内块元素tablecelltabletitleblock元素溢出不可见显示值流-根元素包含值layout,content或paint元素灵活元素的直接子元素flex布局元素多列容器网格布局元素的直接子元素...总结BFC块级格式化上下文，它只是一个封闭的区域，这个区域内的箱子不会影响区域外的布局。BFC区的盒子需要遵守一些布局规则，例如：盒子会垂直排列，盒子的垂直距离由margin控制，BFC区不与浮动盒子重叠，并且在计算BFC的高度时，浮动元素也参与计算等防止元素被浮动元素覆盖。创建（触发）BFC的条件包括给元素添加overflow属性且值为不可见，添加float属性且值为notnone，display属性值为：flow-root,inline-block,table-cell,table,table-row,flex,grid等BFCitBang的参考链接CSS-BFCBFCinCsshttps://www.programmersought.com/
