display: flow-root 是清除浮动的首选方案，因其专为解决父容器高度塌陷而设计，通过触发bfc自然包含浮动子元素，无伪元素、不裁剪绝对定位子项、语义清晰且兼容现代浏览器。
现代项目中，display: flow-root 是清除浮动最直接、副作用最小的方案；但若需兼容 IE11 或旧版 Android WebView，则必须退回 .clearfix::after 伪元素法。
为什么 display: flow-root 是首选
它专为解决浮动导致的父容器高度塌陷而设计：触发 BFC（块级格式化上下文），让父容器自然包含浮动子元素，不依赖 hack、不插入伪内容、不裁剪 position: absolute 子项。
-
display: flow-root不影响溢出行为，对比overflow: hidden更安全 - 无需
content、zoom或table等兼容性补丁 - 语义清晰——明确表达“此容器需独立格式化”，而非靠副作用“碰巧撑高”
- 注意：Safari 10.1+、Chrome 58+、Firefox 53+ 支持；IE 完全不支持
.clearfix::after 还得会，尤其在老环境
当构建需运行在 IE11、Android 4.4 WebView 或某些 CMS 模板中的组件时，.clearfix 仍是唯一可靠选择。
- 标准写法必须含
content: ""，否则伪元素不渲染 -
display: table比display: block更稳妥，能避免 IE6–7 的清除失效 - 若父容器已设
overflow: hidden，.clearfix会失效——BFC 已提前建立，伪元素清无可清 - 别漏掉
*zoom: 1（仅当仍需支持 IE6/7）
哪些清除方式该主动避开
clear: both 加在浮动子元素上、用 overflow: hidden 撑高、或硬塞一个 <div class="clear"></div>——这些都不是“清除浮动”，只是临时糊住症状。
-
clear: both必须作用于**非浮动的后续兄弟元素**，加在浮动元素自己身上毫无意义 -
overflow: hidden会裁剪弹出层、遮罩、tooltip，响应式缩放时还可能意外隐藏内容 - 空
<div> 增加无语义 DOM 节点，动态增删浮动项时极易遗漏，导致布局突然崩塌 <h3>长远来看，别让浮动出现</h3> <p>浮动本就不是为页面布局设计的。2026 年还在用 <code>float: left做导航栏或卡片流，等于主动放弃 Flex 和 Grid 提供的对齐、换行、响应式控制能力。-
display: flex天然包裹子项，flex-wrap控制折行，justify-content管理分布 -
display: grid配合grid-template-areas或grid-auto-flow，多栏布局几行代码搞定 - 若必须兼容 IE11，
flexfallback 成本远低于维护一套脆弱的浮动清除逻辑
真正容易被忽略的点是：清除浮动不是“修 bug”，而是“补设计断层”。当你发现要反复写
.clearfix或调试flow-root的继承异常时，该问的不是“怎么清得更干净”，而是“为什么这里非用 float 不可”。 -
