浮动元素修改宽高，是否会触发布局调整？

浮动元素自有其渲染之法，修改宽高影响布局否？

浮动元素的存在使文本内容对其环绕，倘若对其宽高频繁修改，是否会触发大规模的布局调整？

让我们从分层与渲染视角着手，进一步探究问题的答案。

从分层来看，浮动元素与其相邻元素处于同一层级。而从渲染角度观察，图像的绘制（paint）可被称作重绘，布局（layout）则对应重排。

为了验证，我们编写了测试代码：

<!-- 省略代码 -->
<div class="box">
  @@##@@
  文本内容
</div>
<!-- 省略代码 -->

并使用 javascript 定时修改图片的宽高：

setinterval(() => {
  img.dataset.height = (number(img.dataset.height || 0) + 1) % 3;
}, 1000 * 3);

从结果来看，在修改 width 属性时，布局被触发。添加 position: absolute; 属性到容器元素后，布局不再被触发。

通过 csstriggers.com 网站查询，我们也得到了相似的结论：

<div class="box" style="position: absolute;">
  @@##@@
  文本内容
</div>

因此，在浮动元素的容器元素设置了 position: absolute; 属性后，修改浮动元素的宽高不会触发重排。

以上就是浮动元素修改宽高，是否会触发布局调整？的详细内容，更多请关注其它相关文章！