浮动元素自有其渲染之法，修改宽高影响布局否？
浮动元素的存在使文本内容对其环绕，倘若对其宽高频繁修改，是否会触发大规模的布局调整？
让我们从分层与渲染视角着手，进一步探究问题的答案。
从分层来看，浮动元素与其相邻元素处于同一层级。而从渲染角度观察，图像的绘制（paint）可被称作重绘，布局（layout）则对应重排。
为了验证，我们编写了测试代码：
@@##@@ 文本内容
登录后复制
并使用 javascript 定时修改图片的宽高：
setinterval(() => { img.dataset.height = (number(img.dataset.height || 0) + 1) % 3;}, 1000 * 3);
登录后复制
从结果来看，在修改 width 属性时，布局被触发。添加 position: absolute; 属性到容器元素后，布局不再被触发。
通过 csstriggers.com 网站查询，我们也得到了相似的结论：
@@##@@ 文本内容
登录后复制
因此，在浮动元素的容器元素设置了 position: absolute; 属性后，修改浮动元素的宽高不会触发重排。
以上就是浮动元素修改宽高，是否会触发布局调整？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2850246.html
