浮动导致父容器高度塌陷需用清除浮动或改用Flex/Grid布局；传统方案用伪元素.clear::after{content:"";display:block;clear:both}，现代方案优先display:flow-root或flex；图文环绕等场景仍需保留float。
浮动元素突然不换行，父容器高度塌陷怎么办
这是浮动最经典的问题：子元素用了 float: left 或 float: right，结果父容器高度变成 0，后续内容“上浮”覆盖上去，视觉上像没换行。根本原因不是换行逻辑出错，而是父容器无法感知浮动子元素的高度。
解决思路分两类：传统清除浮动（兼容老项目），或直接弃用 float 改用现代布局。
-
clear: both必须加在浮动元素的「后面」，且是块级元素（如<div>），不能加在浮动元素自己身上 - 常见错误写法：
.item { float: left; clear: both; }——这会让每个元素都独占一行，完全失去并排效果 - 更稳妥的清除方式是伪元素：
.container::after { content: ""; display: block; clear: both; }，避免额外 DOM 节点
为什么 clear: both 有时还是不生效
常见于父容器有 overflow、transform、will-change 等触发 BFC 的属性，此时 clear 会失效——因为 BFC 容器内部的清除行为被隔离了。
- 检查父容器是否意外触发了 BFC（比如写了
overflow: hidden） - 若已触发 BFC，
clear失效是预期行为，此时应改用display: flow-root（原生支持 BFC + 允许 clear） - IE8+ 可用
zoom: 1触发 hasLayout 达到类似效果，但仅限旧项目维护
用 display: flex 替代 float 的关键迁移点
Flex 不仅解决换行和塌陷，还天然支持对齐、等高、反向排列等 float 做不到的事。但迁移时要注意几个隐性差异：
立即学习“前端免费学习笔记（深入）”；
- float 元素默认脱离文档流，flex 子项默认仍在主轴内排列，需显式设
flex-wrap: wrap才能换行 - float 的「文字环绕」效果（如图片左浮，文字绕排）在 flex 中无法直接实现，得回退用 float 或改用
shape-outside - 旧代码中靠
margin-left模拟 float 间隙的写法，在 flex 里应换成gap或justify-content: space-between - 示例对比：
.old { float: left; width: 200px; } .new { flex: 0 0 200px; }——flex: 0 0 200px等价于不伸缩、不收缩、固定宽，更接近 float 行为
什么情况下还不得不保留 float
不是所有场景都能立刻切 flex。以下情况 float 仍是合理选择：
- 需要兼容 IE9 及更早版本（flex 在 IE10+ 才有部分支持，且语法差异大）
- 做图文混排中的文字环绕（
float: left+ 普通段落文本），flex/Grid 都不处理文本流环绕 - 极简脚本环境（如某些邮件模板内联 CSS 限制），float 属性兼容性远高于 flex
- 注意：CSS Grid 虽强大，但对「动态数量子项自动换行」的支持不如 flex 稳定，尤其在响应式卡片列表中
