float文字环绕在响应式下失效，因float不感知视口变化，图片缩放后文字仍按旧宽度折行；ios safari对float+width:100%渲染不稳定，易导致文字掉至图片下方。

float 文字环绕在响应式下为什么会失效

因为 float 本身不感知视口变化，一旦图片尺寸随屏幕缩放，文字流可能卡在错误位置：小屏时图片变窄，但文字仍按旧宽度折行；更糟的是，某些移动浏览器（如 iOS Safari）对 float + width: 100% 的组合渲染不稳定，导致文字突然掉到图片下方。

• 别用 float: left 配 max-width: 100% 图片——这会让浮动容器失去明确宽度基准
• 必须给图片显式设置 width（如 width: 300px）或使用 flex-basis 替代，否则媒体查询里改 max-width 不触发重排
• 文字容器不能有 overflow: hidden 或 contain: layout，否则会剪掉浮动溢出部分

用媒体查询控制 float 断点要盯住两个值

只改图片宽度不够，文字环绕的“临界宽度”取决于图片宽 + 两侧 margin + 文字容器最小可读宽度。比如图片设 width: 280px，左右各留 margin: 16px，那文字区域至少需要 312px 才能保持环绕——低于这个值就得切为上下布局。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 断点建议用 @media (max-width: 480px) 而非 480px，避免视口宽度刚好卡在边界时渲染抖动
• 在断点内重置浮动：img { float: none; width: 100%; }，同时给文字容器加 clear: both
• 别忘了处理图片 aspect-ratio，否则小屏下拉伸变形，文字环绕位置依然错乱

float + media query 的兼容性雷区

IE11 及更早版本不支持 aspect-ratio，而现代 CSS 容器查询（@container）又不兼容 float 布局——这意味着你得在老旧环境和新特性间做取舍。

• 如果需支持 IE11，放弃 aspect-ratio，改用 padding-bottom 技巧维持图片比例，再用 JS 监听 resize 补偿浮动重计算
• Chrome 110+ 开始限制 float 在 contain: paint 容器内的行为，若父容器用了该属性，文字环绕会直接消失
• 所有 float 元素必须紧跟文字内容，中间插个 <div></div> 就会打断环绕流

文字环绕本质是文档流的局部偏移，响应式只是不断调整这个偏移的触发条件。真正难的不是写几行媒体查询，而是确定每个断点下图片与文字的物理占位关系是否还成立——这点很容易被视觉稿忽略。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！