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

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《浮动元素修改宽高，是否会触发布局调整？》，聊聊，希望可以帮助到正在努力赚钱的你。

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

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

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

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

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

<!-- 省略代码 -->
<div class="box">
  <img id="img" src="图像地址" alt="" class="float">
  文本内容
</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;">
  <img id="img" src="图像地址" alt="" class="float">
  文本内容
</div>

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

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