应优先使用 display: flow-root 或 display: flex 替代 float 清除，因 overflow: hidden 副作用多；flow-root 语义明确、副作用小但不支持 ie11；flex 替换 float 需显式重置 float: none、-ms-flex、flex-wrap；图文环绕仍需 float。
直接上 display: flow-root 或 display: flex，别再手动清除浮动——老式 float 布局的副作用（塌陷、错位、重绘放大）在现代浏览器里已有更干净的解法。
为什么 overflow: hidden 不该再用了
它确实能撑开父容器高度，但本质是借溢出裁剪行为“顺带”触发 BFC，副作用太不可控：
-
overflow: hidden会意外截断box-shadow、position: absolute子元素（比如下拉菜单、tooltip） - 在 Safari 旧版本中可能干扰
transform层叠上下文，导致z-index失效 - 和
will-change或transform同时用时，可能创建多余层叠上下文，引发渲染异常
display: flow-root 是最轻量的替代方案
它专为解决浮动塌陷而生，语义明确、副作用极小：
- 一行 CSS 就能创建新的块级格式化上下文（BFC），天然包裹浮动子项
- 不改变子元素定位方式，
position: absolute参照系不变，margin折叠行为也保持原样 - 兼容性需注意：
display: flow-root在 IE11 及更早版本中完全不支持；可用@supports (display: flow-root) {}包裹降级 - 若父容器已设
contain: layout，两者 BFC 行为可能冲突，优先保留contain
flex 替换 float 时必须显式重置的三件事
别指望 display: flex 自动覆盖遗留 float——浏览器仍会先处理 float，再套用 flex 规则，结果不可控：
- 给所有子元素加
float: none（不能只靠继承，必须显式写） - IE10/11 中，
flex: 1必须补全-ms-flex: 1，否则不伸缩 - 没设
flex-wrap: wrap时，子项强行挤在一行，小屏直接溢出；而float天然换行，这点要手动补上
图文环绕这种场景，float 还得留着
目前只有 float 能原生支持文字流式环绕图片，flex 和 grid 都做不到：
- 仅对
<img>单独用float: left或float: right，其他内容保持标准流 - 避免在图文混排容器内塞
border-radius+box-shadow，它们会显著扩大重绘区域 - 不要给浮动图片加
transition动画（尤其改width或margin），这会强制触发 layout + paint
真正难的不是“怎么清除”，而是判断“该不该清除”——多数时候，问题根源不在清除方式，而在布局模型混用：比如给 display: flex 容器还加 clearfix 类，或在 flow-root 里继续写 clear: both。这些组合本身就不成立，只会掩盖结构混乱的事实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
