浮动元素在小屏幕下不换行是因脱离文档流且不响应宽度变化；仅用clear或width无法根本解决；应通过媒体查询切换为flex布局，或直接弃用浮动改用flex/grid。

浮动元素在小屏幕下不换行的典型表现

用 float: left 或 float: right 布局的元素，在移动端宽度变窄时仍强行并排，导致内容溢出容器或被截断。这不是 bug，而是浮动的原始设计逻辑——它脱离文档流、不响应容器宽度变化。

为什么不能只靠 clear 或 width 修复

• clear: both 只能控制单个元素的换行位置，无法让整组浮动项按视口自动重排
• 单纯设 width: 100% 会破坏多列布局意图，且在中等屏幕（如平板）下可能过早堆叠
• 浮动元素的 margin 折叠、父容器高度塌陷等问题会随响应式条件叠加，调试成本陡增

用媒体查询 + flex 替代浮动的实操步骤

核心思路：在桌面端保留浮动（兼容旧逻辑），在关键断点切换为 display: flex 并控制 flex-wrap。示例：

.card-group {
  /* 默认浮动布局（桌面） */
  overflow: hidden;
}
.card-group .card {
  float: left;
  width: 33.333%;
}
<p>/<em> 平板及以下：关闭浮动，启用 flex </em>/
@media (max-width: 768px) {
.card-group {
display: flex;
flex-wrap: wrap;
}
.card-group .card {
float: none;
width: auto;
flex: 1 1 100%; /<em> 单列占满 </em>/
}
}</p><p>/<em> 手机小屏进一步优化间距 </em>/
@media (max-width: 480px) {
.card-group .card {
flex: 1 1 100%;
margin-bottom: 1rem;
}
}

注意：float: none 必须显式声明，否则旧样式会覆盖 flex 布局；flex: 1 1 100% 中的 100% 是基础宽度，确保换行可靠。

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

更干净的方案：直接弃用浮动，全量使用 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）耦合太深——这时候重构比打补丁更省时间。