将img样式宽度设为百分比而非像素导致浮动布局失效

问题背景 #

原始HTML代码如下：

<figure style="display: table; float: right; margin-left: 1.5rem; margin-bottom: 1.5rem; margin-top: 0; margin-right: 0">
  <img src="https://picsum.photos/4000/2000" width="4000" height="2000" style="width: 400px; height: auto">
  <figcaption style="caption-side: bottom; display: table-caption">I know, I just call her Annabelle cause she's shaped like a… she's the belle of the ball! She wanted to look 48. I nearly airbrushed her into oblivion.</figcaption>
</figure>
<p>Michael was having brunch with Sally Sitwell at a restaurant called Skip Church's Bistro. In addition to brunch, the restaurant was known for an item on the menu called the "Skip's Scramble", an omelet that contained everything on the menu. Do not order the Skip's Scramble. You might enjoy this. Oh. Em. Gee. That's amazing. It feels good to be back in a queen! I need a tea to give my dingle less tingle. Teamocil. Heyyyyyy Uncle Father Oscar. Let's see some bananas and nuts! So Ann, the question is, do you want a man or a boy? I know how I would answer. Never once touched my per diem. I'd go to Craft Service, get some raw veggies, bacon, Cup-A-Soup…baby, I got a stew goin'. You might enjoy this. Oh. Em. Gee. That's amazing. I've always been deeply passionate about nature. Perhaps you remember Neuterfest? I'll never forget your wedding. But I did finally get into Dad's pants. Although I had to have the crotch taken in a little bit. She's a girl, I need to teach her how to be a woman. Within her lies a queen. Let me out that queen.</p>

当img的style宽度设为400px时，页面渲染正常：figure元素浮动在段落右侧，文字自然环绕在其左侧和下方。

但将img的style宽度改为25%后：

<img src="https://picsum.photos/4000/2000" width="4000" height="2000" style="width: 25%; height: auto">

出现异常：原本浮动在段落右侧的figure跑到了段落上方，段落文字不再环绕。

技术疑问 #

1. 为何将img宽度单位从px改为百分比会导致此浮动布局失效问题？
2. 是否存在方法可使任意宽度单位及数值都能实现与原布局一致的渲染效果？

解答 #

问题1：原因分析 #

核心问题出在figure的display: table属性与百分比宽度的计算循环依赖上：

• 当img用固定px宽度时，浏览器能直接算出figure（table容器）的明确宽度，浮动元素的占位空间清晰，段落文本可以正常环绕。
• 当img用25%宽度时，这个百分比是相对于父元素figure的宽度，但figure作为table，默认宽度由内部内容（img+figcaption）决定——这就形成了循环依赖：figure的宽度靠img撑，img的宽度又要参考figure。
• 浏览器处理这种循环时，会把figure的宽度收缩到最小，导致浮动元素失去预期的占位空间，段落文本就会跑到它下方，视觉上看起来figure飘到了段落上方。
• 加上figcaption设置了display: table-caption，会进一步干扰table容器的尺寸计算逻辑，加剧问题。

问题2：解决方案 #

要让任意宽度单位都保持原布局效果，需要打破尺寸计算的循环依赖，有以下几种可行方案：

方案1：给figure明确宽度约束

直接给figure设置宽度（固定值、百分比、vw等都可以），让img的百分比宽度有明确参照：

<figure style="display: table; float: right; margin-left: 1.5rem; margin-bottom: 1.5rem; margin-top: 0; margin-right: 0; width: 25%">
  <img src="https://picsum.photos/4000/2000" width="4000" height="2000" style="width: 100%; height: auto">
  <figcaption style="caption-side: bottom; display: table-caption">I know, I just call her Annabelle cause she's shaped like a… she's the belle of the ball! She wanted to look 48. I nearly airbrushed her into oblivion.</figcaption>
</figure>

这里把figure设为25%宽度，img设为100%填充容器，尺寸计算逻辑清晰，浮动布局就能正常工作。

方案2：修改figure的display属性

把figure的display: table改成display: block（或者直接去掉，默认就是block），同时调整figcaption的样式：

<figure style="float: right; margin-left: 1.5rem; margin-bottom: 1.5rem; margin-top: 0; margin-right: 0">
  <img src="https://picsum.photos/4000/2000" width="4000" height="2000" style="width: 25%; height: auto">
  <figcaption style="text-align: center; margin-top: 0.5rem">I know, I just call her Annabelle cause she's shaped like a… she's the belle of the ball! She wanted to look 48. I nearly airbrushed her into oblivion.</figcaption>
</figure>

此时figure作为块级浮动元素，img的百分比宽度会相对于父容器（通常是body或上级块元素），尺寸计算逻辑不再混乱，文本环绕效果恢复正常。

方案3：用现代布局替代浮动（可选）

如果不需要兼容旧浏览器，用Grid或Flexbox能实现更稳定的布局：
比如用Grid布局分隔段落和figure：

<div style="display: grid; grid-template-columns: 1fr auto; gap: 1.5rem">
  <p>...</p>
  <figure style="margin: 0">
    <img src="https://picsum.photos/4000/2000" width="4000" height="2000" style="width: 25vw; height: auto">
    <figcaption style="text-align: center; margin-top: 0.5rem">...</figcaption>
  </figure>
</div>

这种方式布局逻辑更直观，完全避免了浮动和table布局的兼容性问题。

内容的提问来源于stack exchange，提问作者sleepytea