最不推荐的方案是父元素也设置float，因为它会使父容器脱离文档流，引发连锁布局崩塌；overflow:hidden虽能触发BFC但会裁剪溢出内容；现代推荐用display:flow-root创建无副作用BFC，或直接采用flex/grid布局替代浮动。
父元素也设置 float 是最不推荐的方案
它看似“让父容器跟着子元素一起浮动”，从而包裹住浮动子项，但实际会把整个父容器推出文档流，引发连锁布局崩塌——后续兄弟元素会无视它、文字会环绕它、响应式断点可能失效。
常见错误现象包括：margin-top 失效、position: relative 子元素定位偏移、固定定位（position: fixed）被意外影响。这不是“清浮动”，是制造新浮动问题。
- 父级浮动后，无法再用
margin控制与上一个兄弟块的距离 - 若父容器本身是栅格列或 Flex 项目，
float会直接覆盖其布局上下文，导致行为不可预测 - 现代 CSS 布局（如 Grid / Flex）与
float本质冲突，混用极易触发浏览器渲染异常
overflow: hidden 看似简单，但副作用极难排查
它靠触发 BFC 撑开父高，但代价是隐式裁剪——任何溢出内容（下拉菜单、tooltip、横向滚动区、position: absolute 超出边界的提示框）都会被无声截断，且在 Safari 某些版本中会强制显示空白滚动条。
使用场景非常受限：仅适用于你 100% 确认内部绝无溢出、且不依赖 position: fixed 或 transform 的静态模块。
立即学习“前端免费学习笔记（深入）”；
- 一旦加了
overflow: hidden，max-height动画、clip-path过渡、甚至scroll-snap都可能失效 - 和
transform同时存在时，在旧版 Chrome 中可能触发图层分裂，导致模糊或重绘卡顿 - 调试时很难联想到它是罪魁祸首——没有报错，只有“某处内容突然消失”
现代项目优先用 display: flow-root，但要注意继承变化
这是目前最干净的解法：一行声明创建独立 BFC，不干扰溢出、不污染 HTML、不破坏定位上下文。但它会重置部分继承链，比如 font-size 不再从父级继承，而是回退到根字体大小（16px），这点常被忽略。
兼容性已不是问题：Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+ 全支持；IE 完全不支持，但 IE 已退出主流维护。
- 若父容器有
font-size: 14px，子元素没设字号，用display: flow-root后可能意外变小 - 搭配
rem单位时，需确认根字号是否被间接影响（尤其当父容器本身是html或body下的深层嵌套） - 不要和
overflow: auto混用——flow-root本身不处理溢出，叠加overflow属于冗余且易混淆
clearfix 仍是兼容性兜底首选，但别漏掉 content: ""
伪元素方案依然可靠，尤其要支持 IE8+ 的项目。核心就一句：.clearfix::after { content: ""; display: block; clear: both; } ——缺了 content: ""，伪元素根本不会渲染，整个方案失效。
容易踩的坑集中在细节：IE6–IE7 需补 zoom: 1 触发 hasLayout；如果父容器已有 overflow: hidden 或 display: flex，clearfix 会静默失效（BFC 已提前建立，伪元素清浮无意义）。
-
::before和::after必须配对写content，哪怕只是空字符串 - 避免给
::after加height: 0或visibility: hidden——现代浏览器不需要，反而增加维护负担 - 若用 Sass/Less，建议封装成
@mixin clearfix，避免每次手敲重复代码
float 本身已是过时布局模型，强行用它来“修复”浮动，等于用旧伤治新病——越修越乱。 
