应优先用display: flow-root，它一行生效、无副作用；clear: both写在浮动元素自身无效，因仅控制其外边距避开前面浮动，不参与父高计算。
直接用 display: flow-root，现代项目里它比所有 clearfix 变体更干净、无副作用，且一行生效。
为什么不用 clear: both 写在浮动元素自己身上
它根本不起作用——clear 只控制当前元素的**外边距避开前面浮动**，不参与父容器高度计算。写在浮动子元素上（比如 .item { float: left; clear: both; }）既不能撑高父容器，也不能影响兄弟节点布局。常见错误是把它当“清父容器状态”用，结果页面依然塌陷。
-
clear: both必须加在最后一个浮动子元素的**直接后续兄弟块级元素**上 - 该兄弟元素若带默认
margin或line-height，会引入额外空白，建议显式设height: 0; font-size: 0; overflow: hidden; - IE8 需配合
zoom: 1触发 hasLayout，否则仍塌陷
clearfix::after 为什么有时失效
看似只差一行，漏掉任一条件就白写：.clearfix::after { content: ""; clear: both; } 缺少关键声明等于没写。
- 必须有
content: ""——没有内容，伪元素根本不生成 - 必须设
display: table（或block），否则伪元素不参与布局，clear形同虚设；display: table更稳，天然触发 BFC 且不继承line-height - IE8 支持单冒号写法
:after，双冒号::after在旧引擎下可能被忽略
overflow: hidden 看似简单，但隐藏风险更大
它靠触发 BFC 包含浮动子项，原理没错，但实际项目里裁剪行为常被低估。
立即学习“前端免费学习笔记（深入）”；
- 任何溢出内容都会被裁剪：下拉菜单、tooltip、
position: absolute超出父框的部分、transform位移后的区域 - 配合
width使用时，IE6/7 需加*zoom: 1，否则仍塌陷 - 若父容器本应支持横向滚动（如卡片列表），
overflow: hidden会直接禁用滚动
真正容易被忽略的是：清除浮动不是终点，而是信号——它提醒你，当前布局方式已经过时。越早切换到 flex 或 grid，越少陷入 clearfix 套娃和兼容性补丁的循环。
