浮动元素缩放时突然换行，是因为没有设置最小宽度
浮动项在窗口变窄时提前换行，不是浏览器“乱来”，而是容器内部的浮动元素总宽已经撑破了父容器的可用宽度。只要父容器没设 min-width，它就会随视口一起收缩，一旦撑不住子项，就只能让某个浮动元素掉到下一行。
- 浮动本身不创建 BFC，父容器高度塌陷 + 宽度自由收缩 = 换行时机不可控
-
min-width是对容器“底线宽度”的硬约束，不是给子项用的，别写在float元素上 - 如果子项用了
white-space: nowrap或固定宽高（如图片、按钮），更要靠父容器的min-width来兜底
min-width 该设多少？看子项总宽 + 间隙
不能拍脑袋填个 300px 就完事。真实值得算：所有浮动子项的 width（或内容自然宽）+ margin + padding + border，再加一点余量（比如 10–20px）。
- 用浏览器开发者工具的“盒模型”逐个查看每个浮动项的最终占用宽度
- 如果子项用了百分比宽度（如
width: 30%），min-width要按最大可能场景估算（比如三列等宽，按 3 × 33.33% + 间隙 ≈ 100% + 30px） - 避免设成
min-width: 100vw——这会让容器永远占满视口，失去响应意义
示例：
.container {
min-width: 680px; /* 三列浮动按钮，每列 200px + 两边各 10px margin */
overflow: hidden; /* 清除浮动，防止高度塌陷 */
}
float + min-width 组合容易被忽略的兼容性坑
IE8+ 支持 min-width，但 IE7 及更早版本不支持（会直接忽略）。如果还必须兼容老 IE，光靠 min-width 不够。
- IE7 下可配合
zoom: 1触发 hasLayout，再用min-width的 hack 写法（如*min-width: 680px），但效果不稳定 - 现代项目基本不用管 IE7，但要注意某些内嵌 WebView（如旧版 Electron 或 Cordova）可能基于老旧 Chromium，
min-width行为未必一致 - 如果容器同时设置了
display: flex或display: grid，float会被忽略，min-width还生效，但换行逻辑已完全改变——别混用
比 float + min-width 更稳的替代方案
浮动本就不是为响应式布局设计的。真要控制换行节奏，CSS Grid 或 Flexbox 更直接、更可控。
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex+flex-wrap: wrap+min-width在子项上（如flex: 0 0 calc(33.333% - 20px)），换行点清晰可预期 - Grid 中用
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))，一行能塞几个就塞几个，无需手动算min-width - 如果必须保留
float（比如维护老代码），至少把min-width放在包裹容器上，并确认它没被其他样式（如max-width或width）覆盖
浮动没死，但它对“缩放时何时换行”这件事，天生缺乏语义表达力。你得靠 min-width 硬扛，而这个值一旦算错或漏设，换行就会发生在最不该出现的地方。
