BFC在页面重排时的作用

一、什么是BFC

• BFC (块级格式化上下文) ，如果把BFC看作是一个容器的话，容器内部的元素不会影响到容器外部的元素。

二、BFC的特性

1. BFC是块级元素，多个块级元素在垂直方向上会依次排列；
2. BFC是一个独立容器，容器内部的元素不会影响到容器外部的元素；
3. 同一个BFC内的两个元素，margin（外边距）会发生重叠，两者的之间的间隔取两者margin最大的那个。

三、如何创建一个BFC

序号	方法	说明
1	overflow: hidden;	给元素添加隐藏属性
2	display: flex;	将元素转换为弹性盒子
3	display: inline-flex;	将元素转换为行内弹性盒子
4	display:inline-block;	将元素转换为行内块元素
5	position: absolute;	给元素添加绝对定位
6	position: fixed;	给元素添加固定定位

四、BFC的作用

1. 解决当父元素未设置高度，子元素浮动造成父元素高度塌陷问题；
2. 解决父元素未设置上边距，子元素的上边距刺出父元素边界造成的高度塌陷问题；
3. 减少页面重排次数，优化页面渲染。

五、BFC在页面重排时的作用

1. 重排：

   • 当元素的位置或大小属性发生改变时，浏览器会重新创建并渲染新的页面以刷新原来的页面；
   • 整个页面的元素都会重新绘制。

2. 重绘

   • 当元素除位置或大小信息外的其他属性改变时，浏览器会根据元素当前属性进行重新绘制；
   • 只绘制属性改变的元素。

3. BFC在页面重排时的作用

   • BFC内部的元素不会影响到容器外部的元素,所以当BFC内存在元素需要重排时，浏览器只会对BFC内部进行重新创建渲染；
   • 降低了浏览器的工作压力，减少了重排时间。