小屏幕下浮动元素不换行的本质是float未被清除且容器宽度不足；应通过@media设float:none配合clear:both或display:block使其回归文档流自然折行。
小屏幕下浮动元素不换行？本质是 float 未被清除 + 容器宽度不足
float 元素默认会尽可能水平排列，哪怕容器变窄——它不会“自动换行”，只是溢出或挤压。关键不是 float 本身换行，而是让它们在窄屏下失去浮动、回归文档流，再靠块级行为自然折行。
@media 中用 clear 或 display 覆盖 float 更可靠
直接对浮动元素设 clear: both 或 display: block 是最直接的干预方式。比试图“撑开父容器”或加伪元素更可控，尤其当浮动项数量不确定时。
- 用
clear: both会让该元素强制换到新行，适合单个浮动项需独占一行的场景 - 用
display: block（或display: table）可彻底解除浮动影响，让元素按常规块级方式堆叠 - 避免只改父容器
overflow: hidden：它只触发 BFC 清除浮动，但不改变子元素排列逻辑，小屏下仍可能挤成一行溢出
典型响应式写法示例（含断点与 fallback）
下面这段 CSS 让两个并排浮动的按钮，在屏幕 ≤768px 时垂直堆叠：
.btn {
float: left;
margin-right: 10px;
}
@media (max-width: 768px) {
.btn {
float: none;
clear: both;
margin-right: 0;
width: 100%;
}
}
注意：float: none 必须显式写出，否则媒体查询中仅设 clear 不会取消原有浮动；width: 100% 防止内容过窄时按钮收缩变形。
立即学习“前端免费学习笔记（深入）”；
现代替代方案值得考虑，但 float + media query 仍有效
Flexbox 或 Grid 确实更适合响应式布局，但如果你维护旧项目、兼容 IE10+、或只需简单两栏切换，float 配合 @media 依然稳定可用。唯一要盯紧的是：所有浮动元素在媒体查询里必须统一处理，漏掉一个就会破坏整体换行节奏。
