未加载图片无float时不生效指定宽高，有float则生效？原因探究

当<img>元素没有有效src时，浏览器会进入替换元素的 fallback 渲染状态，此时它的尺寸表现差异由布局上下文（是否浮动）决定：

1. 常规流中的img（无float） #

在常规流里，无有效src的img会被视为退化的行内替换元素，浏览器会优先以alt文本的内容尺寸来计算占位符大小，你通过标签属性设置的width和height会被忽略。这是因为行内元素的默认渲染逻辑是适配自身内容，标签属性的尺寸在这种退化状态下优先级低于内容尺寸。

2. 浮动状态的img（float:left） #

浮动元素会脱离常规流，浏览器会强制为它应用完整的替换元素盒模型规则。即使没有有效src，只要通过标签属性或CSS指定了width和height，浏览器就会优先使用这些设定值渲染占位符——这是因为浮动元素需要明确的尺寸来稳定布局，避免对周围常规流元素的排版造成不可预测的干扰。

验证补充 #

如果给常规流的img添加CSS样式的尺寸（比如style="width:100px; height:100px"），即使没有有效src，它也会遵守指定尺寸，和浮动img的表现一致。这说明核心差异是布局上下文对尺寸优先级的影响：标签属性的尺寸在常规流退化状态下优先级低，而在浮动状态下优先级更高。

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