认识
2023年02月28日
一、认识
Box: Box 是 CSS 布局的对象和基本单位，⼀个⻚⾯是由很多个 Box 组成的，这个Box就是我们所说的盒模型。
Formatting Context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦元素将如何定位，以及和其他元素的关系和相互作⽤。
**块格式化上下文（Block Formatting Context，BFC）**是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。通俗来讲: BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。
二、创建
下列方式会创建块格式化上下文:
-
文档根元素:
<html> -
元素设置浮动:
float除none以外的值 -
元素
overflow值为:hidden、auto、scroll -
元素设置绝对定位:
position(absolute、fixed) -
元素设置容器:
contain(layout、content或者strict) -
元素
display值为:inline-block、table-cell、table-caption、 和table-*等表示表格单元格的属性、flex、grid、flow-root、flow-root list-item等 -
元素设置多列
column-count:column-count: xx( 不为 auto );;column-span:all; 始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中
三、特点
3.1 BFC 将任何子元素都包含在其中, 包含浮动元素
3.2 BFC 不得与元素本身所在的块格式化上下文中的任何浮动的外边距重叠
四、功能
-
包含内部浮动
-
排除外部浮动
-
阻止外边距重叠