最安全的清除浮动操作是给父容器加.clearfix类并用标准伪元素写法。它通过::after创建BFC真正包含浮动子元素，兼容IE8+，无副作用；overflow:hidden有裁剪、滚动条等隐患；display:flow-root现代可用但不兼容IE；clear:both不能加在浮动元素自身。
最安全的清除浮动操作，是给浮动元素的父容器加 .clearfix 类，并配合标准伪元素写法——它不依赖浏览器对 overflow 的副作用，也不引入无意义 DOM 节点，兼容性覆盖 IE8+，且语义干净。
为什么 .clearfix::after 是首选方案
它本质是让父容器创建 BFC（块级格式化上下文），从而真正“包含”浮动子元素，而不是靠裁剪、hack 或结构污染来掩盖问题。
-
content: ""必须写，否则伪元素不渲染，clear失效 -
display: table比block更稳：天然触发 BFC，不继承line-height导致额外高度 -
clear: both必须作用在伪元素上，且伪元素必须插在所有浮动子元素之后——::after正好满足 - IE8 支持单冒号写法：
.clearfix:after，双冒号::after在旧引擎可能被忽略
overflow: hidden 看似简单，但容易踩哪些坑
它只是附带触发 BFC，不是专为清除浮动设计，副作用明确且隐蔽：
- 会裁剪
position: absolute溢出父容器的内容（如下拉菜单、tooltip、阴影） - 设为
auto时，Safari 对空内容可能意外显示滚动条 - 抑制 margin 折叠，可能破坏已有垂直间距逻辑
- 若父容器本身需要横向滚动（如轮播图容器），
overflow: hidden直接禁用滚动
现代项目可直接用 display: flow-root 吗
可以，但它不是“万能替代”，需确认目标环境：
立即学习“前端免费学习笔记（深入）”；
-
display: flow-root是 CSS 标准中专为创建 BFC 设计的属性，一行解决、无副作用 - 支持情况：Chrome 64+、Firefox 58+、Safari 12.1+、Edge 79+；Safari 10.1–12.0 需加前缀
-webkit-flow-root - IE 完全不支持，哪怕 IE11 也不能用——老项目或需兼容 Win7 用户时，不能单独依赖它
- 和
.clearfix不冲突，可并存：现代浏览器走flow-root，降级兜底用伪元素
别再给浮动元素自己加 clear: both
这是高频误写，完全无效：
-
clear控制的是“当前元素外边距避开前面浮动”，不是“通知父容器我在这儿” -
.child { float: left; clear: both; }只会让该元素下移，但它仍脱离文档流，父容器高度还是 0 - 真正起作用的
clear: both，必须出现在浮动子元素之后、且属于普通文档流的元素上（比如伪元素或空<div>） - 如果用了 Flex 或 Grid 布局，
float本就失效，此时加clear或clearfix属于冗余甚至干扰
真正难的从来不是贴几行 CSS，而是判断“这里到底该不该用 float”——图文混排时 float 依然合理，但做三栏布局还用它，清除浮动只是在给错误决策打补丁。
