clearfix仍是主流清除浮动方案，因其用::after伪元素插入content:""并设置display:block和clear:both，在不污染HTML前提下兼容IE8+；而现代项目推荐display:flow-root，一行代码创建BFC且无副作用。
clearfix 是目前最主流、兼容性与语义性兼顾的清除浮动方案，但“最优”取决于你的项目环境——如果你不需要支持 IE6–IE7，display: flow-root 才是真正更轻量、更可靠的现代解法。
为什么 clearfix 仍是多数项目的默认选择
它本质是用伪元素模拟一个“视觉上不存在、逻辑上起作用”的块级清浮元素，不污染 HTML 结构，且能覆盖绝大多数浏览器（包括 IE8+）。
-
::after伪元素插入空内容，display: block+clear: both确保它占据整行并打断浮动流 - 必须配合
content: ""，否则伪元素不会渲染；visibility: hidden或height: 0可选，但非必需 - IE6–IE7 需额外加
zoom: 1触发 hasLayout，否则伪元素不生效 - 若父容器本身有
overflow: hidden或auto，clearfix会失效（因为 BFC 已提前闭合）
display: flow-root 比 clearfix 更干净，但别乱用
这是 CSS Display Module Level 3 引入的原生属性，直接为容器创建独立的块级格式化上下文（BFC），天然包裹浮动子元素，无需 hack。
- 一行代码解决：
display: flow-root，无伪元素、无 zoom、无兼容性补丁 - 不触发溢出裁剪（对比
overflow: hidden），也不影响position: fixed子元素定位（对比overflow: auto） - 兼容性：Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+；IE 完全不支持
- 注意：它会重置某些继承行为（如
font-size不再从父级继承），极少数老项目中可能引发意外缩放
为什么不要用 overflow: hidden 清除浮动
它确实能触发 BFC 并撑开父高，但副作用太强，属于“治标不治本”的权宜之计。
立即学习“前端免费学习笔记（深入）”；
- 任何超出父容器的内容（如下拉菜单、tooltip、绝对定位偏移）都会被裁剪不可见
- 滚动条行为异常：即使内容没溢出，
overflow: auto在部分 Safari 版本下仍会显示空白滚动条 - 响应式场景下，当子元素宽度随视口变化而超过父宽时，内容突然消失，调试困难
- 它和
float本身无逻辑关联，只是借用了 BFC 的副作用，语义断裂
额外标签法（<div class="clear"></div>）现在只用于极端情况
仅在无法修改 CSS、或需兼容非常老旧 CMS 模板（如 WordPress 早期主题）时才考虑，日常开发应避免。
- HTML 层面引入无语义空标签，破坏结构可读性，增加 DOM 节点数
- 若浮动元素动态增删，必须同步维护该标签存在与否，容易遗漏导致布局崩塌
- 移动端下，某些浏览器对空
div的最小高度处理不一致（如旧版 Android Browser 默认 19px） - 唯一优势：调试时一眼可见“清浮点”，适合教学演示或临时排查
真正容易被忽略的是：清除浮动不是目的，**让父容器正确参与文档流高度计算**才是。很多情况下，你根本不需要浮动——Flex 或 Grid 布局能一劳永逸避开这个问题。如果还在用 float 做整体布局，先问自己一句：这个需求，是不是用 display: flex 三行 CSS 就能替代？
