浮动元素在宽度缩小时会“掉行”，因其脱离文档流且不感知容器变化，容器变窄时无法并排则被挤至下一行；需在媒体查询中显式设float: none并清除浮动才能避免布局崩塌。
浮动元素在宽度缩小时为什么会“掉行”
因为 float 会让元素脱离文档流，后续内容会紧贴其边缘排列；当容器变窄、无法容纳所有浮动子元素并排时，浏览器只能把最后一个浮动元素“挤”到下一行——这不是响应式设计的主动行为，而是布局崩塌的被动结果。
- 浮动本身不感知父容器宽度变化，也不触发重排逻辑
- 父容器若未清除浮动（
clear或overflow: hidden），高度会坍缩为 0，进一步加剧布局错乱 - 媒体查询中仅改
width不处理float状态，容易导致断点处出现半行残留或重叠
用 float 做两栏布局时，小屏下如何避免右侧栏掉到底部
单纯靠 @media 改宽度不够，必须显式取消浮动，并重设块级流式行为。
.sidebar { float: left; width: 200px; }
.main { float: right; width: calc(100% - 200px); }
<p>@media (max-width: 768px) {
.sidebar,
.main {
float: none;
width: 100%;
}
}关键点：
-
float: none必须写在断点内，否则小屏仍按浮动逻辑计算位置 - 若父容器有
overflow: hidden清浮动，小屏时也需保留，否则高度坍缩会导致内容不可见 - 避免在媒体查询中只改
width而漏掉float重置，这是最常被忽略的一步
为什么现代响应式项目几乎不用 float 布局
不是它不能用，而是它缺乏对“宽度动态适应”的原生支持：没有自动换行控制（不像 flex-wrap），没有主轴对齐（justify-content），也没有尺寸收缩优先级（flex-shrink）。
立即学习“前端免费学习笔记（深入）”；
-
float的“流式”依赖手动计算宽度和清除，而flex/grid是声明式响应 - IE8–9 虽支持
float，但不支持flex，如今已无必要为这些浏览器妥协 - 使用
float实现等分布局需 hack（如负 margin + 百分比宽度），而flex: 1一行解决
如果必须兼容老代码，怎么安全地渐进升级浮动布局
不要直接全量替换，优先在局部模块用 display: flex 覆盖原有浮动规则，利用 CSS 层叠特性隔离影响。
.legacy-grid {
/* 保留原有 float 规则 */
}
.legacy-grid .new-section {
display: flex;
}
.legacy-grid .new-section > * {
flex: 1;
float: none !important; /* 强制覆盖旧 float */
}注意：
- 加
!important是为了确保新规则压过旧浮动样式（尤其来自外部 CSS 文件） - 避免在同一个选择器里混用
float和flex，浏览器会忽略float，但可能引发意外交互 - 旧浮动代码里的
margin往往是为绕开浮动塌陷写的，换成flex后要一并删掉，否则留白异常
浮动布局在响应式中的脆弱性，不在语法错误，而在它根本没把“响应”当作设计目标。宽度变化只是表象，真正卡住的是你对布局控制权的让渡。
