什么是BFC？BFC（BlockFormattingContexts）块级格式化上下文，是页面CSS可视化渲染的一部分，用于确定块级框的布局和浮动交互范围的区域。BFC创建根元素（）浮动元素（floatisnotnone）绝对定位元素（positionisabsoluteorfixed）表格标题和单元格（display是table-caption,table-cell）匿名表格单元格元素（display是tableorinline-table)内联块元素(显示为inline-block)溢出值不可见的元素弹性元素(显示为flex或inline-flex直接子元素)网格元素(显示为grid或inline-grid的直接子元素elements)BFC的范围BFC包括创建它的元素的所有子元素，但不包括创建新BFC的子元素的内部元素。简单来说，如果一个子元素创建了一个新的BFC，那么它里面的内容就不属于之前的BFC了，体现了BFC隔离的思想。也就是说，一个元素不能同时存在于两个BFC中。BFC的特点BFC内部的块级框会在垂直方向依次排列①同一个BFC下相邻的块级元素可能有margincollapse，新建一个BFC可以避免margincollapse②每个元素的左边边距框（marginbox）的触及包含块边框框（borderbox）的左侧（从右到左格式化，相反），即使有浮动③浮动框的区域不会与BFC重叠④计算BFC高度时，浮动元素也会参与计算⑤BFC的应用自适应多列布局利用特性③和④，中间列创建BFC，左右列固定在宽度然后漂浮。由于box的marginbox左侧触及containingblockborderbox的左侧，浮动框的区域不会与BFC重叠，所以中间列的宽度会自适应，example.防止边距折叠使用特性②，创建一个新的BFC，使相邻的块级框位于不同的BFC下，以防止边距折叠，示例。清除浮动使用特性⑤，BFC内部的浮动元素也会参与高度计算，可以清除BFC内部的浮动，example。笔记的最后一篇参考文章：url(https://www.colabug.com/2020/...)这是我在思府上写的第一篇笔记，以后还会继续写，当然我以后会在学习中补充。最后介绍一句我很喜欢的一句话：保持独立思考，不卑不亢，长成自己想要的样子。
