真正要避的坑是“为什么一清就出新问题”：父容器设float会连锁崩塌，overflow:hidden会隐式裁剪内容，display:flow-root会重置字体继承，伪元素clearfix必须写content:""才生效。
生产环境里，float 本身已不是布局首选，但只要还在维护老项目、做图文混排或兼容旧浏览器，就绕不开它。真正要避的坑，不是“怎么清浮动”，而是“为什么一清就出新问题”。
父容器设 float 会连锁崩塌
这是最危险的“解法”：给父元素也加 float: left 看似能包裹子项，实则让整个父容器脱离文档流。
- 后续兄弟块会无视它，
margin-top失效，文字可能环绕它 - 若父容器本身是
flex项目或栅格列，float会覆盖其布局上下文，行为不可预测 -
position: fixed元素可能意外偏移，尤其在 Safari 或旧版 Chrome 中
overflow: hidden 裁剪溢出内容极难排查
它靠触发 BFC 解决高度塌陷，但副作用是隐式裁剪——没有报错，只有内容突然消失。
- 下拉菜单、
tooltip、position: absolute超出边界的提示框全被截断 - Safari 某些版本会强制显示空白滚动条，哪怕内容没溢出
- 和
transform同时存在时，在旧版 Chrome 可能触发图层分裂，导致模糊或卡顿 - 调试时很难联想到它是源头，尤其当问题只在特定视口宽度下出现
display: flow-root 会重置字体继承
这是目前最干净的纯 CSS 解法，但有个易忽略的细节：它会切断部分继承链。
立即学习“前端免费学习笔记（深入）”；
- 子元素未显式设置
font-size时，不再继承父级字号，而是回退到根字号（通常 16px） - 若父容器设了
font-size: 14px，子元素用rem单位时，可能因根字号未变而意外变小 - 不支持 IE，但 IE 已退出主流维护；Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+ 全支持
伪元素 clearfix 别漏掉 content: ""
兼容性兜底方案依然有效，但少写一个属性就会失效。
-
.clearfix::after必须有content: ""，否则伪元素不生成，clear: both无作用 - 推荐完整写法：
display: table（比block更稳妥，避免某些旧浏览器 margin 折叠） - 若项目需支持 IE8+，这是比
flow-root更现实的选择
真正复杂的点不在“选哪个方案”，而在判断当前场景是否真需要 float：图文环绕？用 float + clear 是合理选择；两栏布局？直接上 display: flex ——多数“清除浮动”问题，本质是不该用浮动。
