float在图文环绕、IE8–10兼容、无法修改HTML的极简场景及特定动画中仍不可替代；必须配套清除浮动逻辑，否则引发塌陷与错位。
现在仍需掌握浮动，不是因为它适合做布局，而是因为真实项目里你绕不开它——尤其是维护老代码、处理图文环绕、应付IE兼容时，float 是唯一能跑通的解法。
哪些场景下 float 仍是不可替代的
现代布局早该用 display: flex 或 display: grid，但以下情况你必须写 float：
- 旧系统还在跑 IE8–10：这些浏览器不支持 Flexbox（IE10+ 才部分支持，且有 bug），
float+clearfix是唯一稳定方案 - 文字环绕图片：
img { float: left; margin-right: 1em; }仍是目前最轻量、最兼容、最可控的方式；shape-outside虽然新，但 Safari 支持差、行高变化时易错位 - 极简 DOM 场景：比如 CMS 模板里只允许改 CSS 不让动 HTML，没法加 wrapper 元素，
float是唯一能横向对齐两个按钮又不新增标签的手段 - 某些动画过渡效果：比如用
transition: float .3s做“滑入侧边栏”动效，比transform+position更少触发重排，尤其在低性能设备上更稳
clear: both 为什么经常失效
写了 clear: both 却没清掉浮动？大概率是踩了这几个坑：
- 该元素自己也设置了
float：脱离文档流后，clear就失去作用对象 - 它和浮动元素不在同一个 BFC 内：比如父容器用了
display: flex，子元素的clear在 flex 容器里根本无效 - 它被
display: none、visibility: hidden或 z-index 遮挡了，但样式还在解析 - 它写在浮动元素前面：
clear只影响“紧邻的前一个”浮动兄弟，顺序错了就白写
调试时临时加 background: red 和 border: 1px solid 到待清除元素，确认它是否真实渲染、是否被其他规则压制。
立即学习“前端免费学习笔记（深入）”；
清除浮动的现代写法 vs 传统写法
别再无脑复制 .clearfix::after 了。优先用 display: flow-root：
-
display: flow-root：一行代码创建 BFC，让父容器重新包含浮动子元素，不裁剪overflow、不干扰布局流，Chrome 64+/Firefox 59+/Safari 10.1+ 都支持 -
overflow: hidden：能“骗”出高度，但会意外裁剪position: absolute下拉菜单、box-shadow或transform后的内容 -
.clearfix::after：需要写content: ""、display: table、clear: both，多三行代码，还引入了伪元素节点
注意：IE 全系不支持 flow-root，但如果你还在支持 IE，那清除浮动只是你该解决的最小问题。
真正容易被忽略的是：哪怕只在一个地方用了一次 float，也得同步处理父容器塌陷——否则后续内容会“塌”进浮动区下面，这种问题在响应式断点切换时尤其隐蔽，而且很难一眼定位到根源。
