对 BFC 的理解

对 BFC 的理解

BFC 即 区块格式化上下文，可以理解为一种特殊环境，决定块级盒的布局及浮动影响范围的区域，并附带多项特性，在理解 BFC 之前需要先对：

• 盒模型
• 块级元素
• 行级元素
• 块级盒
• 行内盒
• 匿名盒
• 定位

进行简单了解

盒模型

组成：内容、内边距、边框、外边距

内容区域大小，可以通过 width , min-width , max-width ， height , min-height , max-height 控制，即 css 设置的元素宽高只针对内容区域，不含 margin , border

块级元素

css 属性值 display 为 block ， list-item, table 的元素

行内级元素

css 属性值 display 为 inline ， inline-block, inline-table 的元素

块级盒

块级盒特征：

• css 属性值 display 为 block ， list-item, table 的元素（首先得是块元素）
• 块级盒默认竖直排列
• 每个块级盒都参与 BFC 创建
• 每个块级元素至少生成一个块级盒，称为主会计盒，一些块元素还会生成额外的块级盒，比如
• , 用来存放符号

行内盒

行内盒特征：

• css 属性值 display 为 inline ， inline-block, inline-table 的元素（首先得是行内元素）
• 行内盒与其他行内元素横向排列为多行
• 所有的可替换元素（即 display 值为 inline，如