反复修改浮动元素的宽高，会触发浏览器重排吗？

修改浮动元素的宽高是否会触发重排？

周所周知，给图片设置浮动属性后，相邻文本内容会环绕对其。对已设置浮动属性的图片进行反复的宽高修改，是否会触发大规模重排？

分析：

从分层角度，图片和文本处于同一层级。

从渲染角度，“paint”和“layout”分别指重绘和重排。

测试代码：

<style>
    .box {}
    
    .box .float {
        float: left;
        width: 80px;
        height: 100px;
    }
    
    .box .float[data-width="1"] {
        width: 180px;
    }
    
    .box .float[data-width="2"] {
        width: 280px;
    }
    
    .box .float[data-width="3"] {
        width: 380px;
    }
    
    .box .float[data-height="1"] {
        height: 180px;
    }
    
    .box .float[data-height="2"] {
        height: 280px;
    }
    
    .box .float[data-height="3"] {
        height: 380px;
    }
</style>

<script>
    setInterval(() => {
        img.dataset.height = (Number(img.dataset.height || 0) + 1) % 3 
    }, 1000 * 3)
</script>

<div>
    https://www.lilnong.top/cors/linong
</div>

<div>
    https://segmentfault.com/u/linong
</div>

<hr>

<div class="box">
    @@##@@
    我是一个粉刷匠，粉刷本领强。
    念奴娇·宜雨亭咏千叶海棠原文及赏析
    
    　　念奴娇·宜雨亭咏千叶海棠
    
    　　作者：张鎡
    
    　　朝代：宋朝
    
    　　绿云影里，把明霞织就，千重文绣。紫腻红娇扶不起，好是未开时候。半怯春寒，半便晴色，养得胭脂透。小亭人静，嫩莺啼破清昼。
    
    　　犹记携手芳阴，一枝斜戴，娇艳波双秀。小语轻怜花总见，争得似花长久。醉浅休归，夜深同睡，明日还相守。免教春去，断肠空叹诗瘦。
        
</div>

<div>
    https://www.lilnong.top/cors/linong
</div>

<div>
    https://segmentfault.com/u/linong
</div>

结果：

反复修改图片的宽高会触发重排。

补充：

移除 position: absolute; 样式后，重排消失。

示例网站：

csstriggers.com

以上就是反复修改浮动元素的宽高，会触发浏览器重排吗？的详细内容，更多请关注其它相关文章！