现代项目中应避免用 float 做响应式图文混排，因其脱离文档流导致塌陷、错位等问题，且在媒体查询下行为不可预测；推荐使用 display: flow-root、flex 或 grid 替代。
别用 float 做响应式图文混排——除非你必须兼容 IE9 或更老的浏览器。现代项目里，float 在响应式场景下极易失控，不是清除不干净，而是“清除”本身在不同断点下行为不可预测。真正要解决的不是“怎么清”，而是“为什么非得让它浮”。
float + 媒体查询 = 布局漂移的温床
浮动元素脱离文档流，导致父容器高度塌陷、后续元素上移、文字环绕错位——这些问题在单一切片下还能靠 clear: both 或 ::after 临时压住；但一旦加入媒体查询，浮动宽度没重算、clear 作用域错位、overflow: hidden 裁剪绝对定位子元素，就会批量爆发。
- 桌面端写
float: left; width: 300px，小屏下直接溢出视口，max-width: 100%也救不回来（因为 float 不响应 flex/grid 的收缩逻辑） - 用
@media (max-width: 768px) { .img { float: none; width: 100%; } }后，文字区域可能仍卡在上一行末尾——不是 CSS 写错了，是浮动残留影响了行框计算 -
display: flow-root在媒体查询里设给父容器？没问题；但若子元素用了position: absolute，它会被意外裁剪
如果非用 float，清除必须落在容器级，而非元素级
在图文混排容器上加 clearfix 类，而不是在每张图或每段文字后手动插 clear: both 元素。后者破坏语义、增加维护成本，且在动态渲染（如 React/Vue）中极易漏掉。
- 正确写法：
.figure-container::after { content: ""; display: table; clear: both; }，并确保该容器没有overflow: hidden或display: contents - 避免把
clearfix套进媒体查询里（比如@media {... .figure-container::after {...} }），伪元素在部分 CSS-in-JS 环境下会被覆盖或忽略 - 更现代的替代：直接给容器设
display: flow-root，它比overflow: hidden更干净，也不会裁剪position: absolute子项
float 文字环绕的唯一可靠边界：只用于静态图+固定宽高
float: left 配合图片实现文字环绕，仅在图尺寸固定、文字量可控、无响应切换时才稳定。一旦引入 max-width: 100% 或 aspect-ratio，环绕行高、首行缩进、断行位置就全乱了。
- 常见错误：给图片设
float: left; width: 200px;，再用媒体查询改成width: 100%—— 浮动方向没变，但宽度突变会强制重排整段文字，造成首行空白或末行悬空 - 若必须响应式绕图，优先考虑
shape-outside（配合float），但注意：它不支持百分比路径，clip-path也不能替代；且 Safari 对shape-outside: margin-box支持不稳定 - 真实项目中，90% 的“绕图”需求其实只需并列布局 + 间隙控制，用
flex+gap+min-content更省心
浮动不是不能用，而是它的“可控区间”太窄——窄到几乎只剩纯静态页面、无 JS 交互、无响应断点、无动态内容的场景。一旦涉及 resize、加载、增删节点，float 就从工具变成定时炸弹。真正该花时间调试的，从来不是怎么清浮动，而是怎么绕开它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
