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

周所周知，设置浮动属性的图片元素会使相邻文本内容对其环绕。

那么对一个已经设置了浮动属性的图片元素，进行反复修改宽高的操作，是否会触发大规模的重排？

阅读 2.6k

影响布局，我赌一手会重排。接下来就是验证了。

从分层来看，是在同一层

从 rendering 来看，paint 应该就是常说的重绘，layout 就是常说的重排

补充上述测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <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/css/img/logo@2x.png" alt="" class="float">
        我是一个粉刷匠，粉刷本领强。
    念奴娇·宜雨亭咏千叶海棠原文及赏析
    
    　　念奴娇·宜雨亭咏千叶海棠
    
    　　作者：张鎡
    
    　　朝代：宋朝
    
    　　绿云影里，把明霞织就，千重文绣。紫腻红娇扶不起，好是未开时候。半怯春寒，半便晴色，养得胭脂透。小亭人静，嫩莺啼破清昼。
    
    　　犹记携手芳阴，一枝斜戴，娇艳波双秀。小语轻怜花总见，争得似花长久。醉浅休归，夜深同睡，明日还相守。免教春去，断肠空叹诗瘦。
        
    </div>
    <div>
        https://www.lilnong.top/cors/linong
    </div>
    <div>
        https://segmentfault.com/u/linong
    </div>
</body>
</html>

.box{position: absolute;} 之后可以看到 layout 没了。