
浮动元素自有其渲染之法,修改宽高影响布局否?
浮动元素的存在使文本内容对其环绕,倘若对其宽高频繁修改,是否会触发大规模的布局调整?
让我们从分层与渲染视角着手,进一步探究问题的答案。
从分层来看,浮动元素与其相邻元素处于同一层级。而从渲染角度观察,图像的绘制(paint)可被称作重绘,布局(layout)则对应重排。
为了验证,我们编写了测试代码:
@@##@@ 文本内容
并使用 javascript 定时修改图片的宽高:
setinterval(() => {
img.dataset.height = (number(img.dataset.height || 0) + 1) % 3;
}, 1000 * 3);从结果来看,在修改 width 属性时,布局被触发。添加 position: absolute; 属性到容器元素后,布局不再被触发。
通过 csstriggers.com 网站查询,我们也得到了相似的结论:
@@##@@ 文本内容
因此,在浮动元素的容器元素设置了 position: absolute; 属性后,修改浮动元素的宽高不会触发重排。










