浮动元素“不换行”实为父容器塌陷或后续元素未清除浮动，需用clear:both、BFC触发（如overflow:hidden或伪元素）解决；响应式下须在media query中设float:none并重置clear；现代布局应优先使用Flex/Grid。
浮动元素突然不换行，先检查 clear 是否被遗漏
浮动元素脱离文档流后，后续块级元素可能“塌陷”或错位，看似“不换行”，实则是父容器高度塌陷、或兄弟元素未主动清除浮动。最常见的情况是：多个 float: left 的卡片并排后，下一行内容紧贴在右侧而非另起一行。
- 如果下一行元素需要独占一行，必须在其样式中显式设置
clear: both（或clear: left/clear: right，按需选择） - 仅靠
width或margin无法强制换行，浮动不会触发 BFC 边界自动换行 - 避免对浮动元素本身加
clear，它只对后续的非浮动元素生效
例如：
.card { float: left; width: 200px; }
.content-below { clear: both; }
响应式断点下浮动失效，media query 中要重置 float 和 clear
移动端小屏时，若仍保留 float: left，元素可能因宽度不足而堆叠错乱，甚至溢出容器。此时不能只改宽度，必须主动解除浮动行为。
- 在断点内将浮动元素设为
float: none，否则width: 100%也压不住浮动带来的布局干扰 - 同时移除或重置
clear，避免无意义的空白间隙 - 若使用 Flex/Grid 替代方案，也要注意旧浮动规则是否残留在 CSS 优先级中（比如未用
!important覆盖内联样式）
典型写法：
@media (max-width: 768px) {
.card { float: none; width: 100%; }
.content-below { clear: none; }
}
父容器高度塌陷导致“换行假象”，用 overflow: hidden 或伪元素更稳妥
浮动元素不撑开父容器，常让后续内容“浮”在父容器下方，看起来像没换行。这不是换行逻辑问题，而是高度计算缺失。
-
overflow: hidden是最轻量的触发 BFC 方式，能包含浮动子元素，但要注意会裁剪溢出内容 - 更推荐伪元素清除法：
.container::after { content: ""; display: table; clear: both; } - 不要用空
，增加无意义 DOM 节点
现代布局中该不该继续用 float 控制换行？
float 本意是文字环绕图片，不是做栅格布局。如今用它实现多列换行，本质是在 hack 排版机制。
立即学习“前端免费学习笔记（深入）”；
- Flexbox 的
flex-wrap: wrap天然支持“空间不足即换行”，语义清晰、控制粒度细 - CSS Grid 的
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))更适合响应式卡片流 - 保留
float通常只为兼容 IE9 及更老版本；若项目已放弃 IE，就别再为换行问题调clear和媒体查询了
浮动换行的坑，多数藏在“以为清了但实际上没清”和“小屏下忘了关浮动”这两处。
