BFC简析

Posted 2020-10-15 维尼熊的进阶路

一、BOX模型

box是CSS中布局的基本单位，而不同类型的box，会参与不同的Formatting Context（一个决定如何渲染文档的容器），box内的元素会以不同的方式渲染。

block-level：display属性为blcok、table、list-item，会生成block-level box，并参与Block Formatting Context。

inline-level：display属性为inline、inline-block，inline-table，会生成inline-level box，并参与Inline Formatting Context。

 

二、Formatting Context

Formatting Context是页面中的一块渲染区域，并有一套渲染规则，决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

常见的Formatting Context：

1.Block Formatting Context ：BFC 块级格式化上下文

2.Inline Formatting Context ：IFC

 

三、BFC布局规则

1.内部box会在垂直方向，一个接一个放置；

2.box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠；

3.每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）；

4.BFC的区域不会与float box重叠；

5.BFC就是页面上的一个隔离的容器，容器里面的子元素不会影响到外面的元素，反之亦如此；

6.计算BFC高度时，浮动元素也参与计算。

 

哪些元素会生成BFC：

1.根元素；

2.float属性不为none；

3.position为absolute、fixed；

4.display为inline-block，table-cell、table-caption、flex、inline-flex；

5.overflow不为visible。