浮动元素在小屏幕下不换行是因脱离文档流且不响应宽度变化；仅用clear或width无法根本解决；应通过媒体查询切换为flex布局，或直接弃用浮动改用flex/grid。
浮动元素在小屏幕下不换行的典型表现
用 float: left 或 float: right 布局的元素，在移动端宽度变窄时仍强行并排，导致内容溢出容器或被截断。这不是 bug，而是浮动的原始设计逻辑——它脱离文档流、不响应容器宽度变化。
为什么不能只靠 clear 或 width 修复
-
clear: both 只能控制单个元素的换行位置，无法让整组浮动项按视口自动重排
- 单纯设
width: 100% 会破坏多列布局意图，且在中等屏幕（如平板）下可能过早堆叠
- 浮动元素的 margin 折叠、父容器高度塌陷等问题会随响应式条件叠加，调试成本陡增
用媒体查询 + flex 替代浮动的实操步骤
clear: both 只能控制单个元素的换行位置，无法让整组浮动项按视口自动重排width: 100% 会破坏多列布局意图，且在中等屏幕（如平板）下可能过早堆叠核心思路：在桌面端保留浮动（兼容旧逻辑），在关键断点切换为 display: flex 并控制 flex-wrap。示例：
.card-group {
/* 默认浮动布局（桌面） */
overflow: hidden;
}
.card-group .card {
float: left;
width: 33.333%;
}
/ 平板及以下：关闭浮动，启用 flex /
@media (max-width: 768px) {
.card-group {
display: flex;
flex-wrap: wrap;
}
.card-group .card {
float: none;
width: auto;
flex: 1 1 100%; / 单列占满 /
}
}
/ 手机小屏进一步优化间距 /
@media (max-width: 480px) {
.card-group .card {
flex: 1 1 100%;
margin-bottom: 1rem;
}
}
注意：float: none 必须显式声明，否则旧样式会覆盖 flex 布局；flex: 1 1 100% 中的 100% 是基础宽度，确保换行可靠。
更干净的方案：直接弃用浮动，全量使用 flex 或 grid
如果项目无 IE8–9 兼容压力，直接移除所有 float，改用现代布局：
立即学习“前端免费学习笔记（深入）”；
- 两栏/三栏等固定结构 →
display: grid配合grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) - 卡片流、导航菜单 →
display: flex+flex-wrap: wrap，用min-width控制换行阈值 - 避免混合浮动与 flex，否则触发渲染层冲突，Chrome 和 Safari 表现不一致
真正难处理的不是“怎么让浮动换行”，而是旧代码里浮动与其他定位（position: relative、z-index）耦合太深——这时候重构比打补丁更省时间。
