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

从现在开始，努力学习吧！本文《反复修改浮动元素的宽高，会触发浏览器重排吗？ 》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

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

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

分析：

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

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

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

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

结果：

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

补充：

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

示例网站：

csstriggers.com

理论要掌握，实操不能落！以上关于《反复修改浮动元素的宽高，会触发浏览器重排吗？ 》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！