最推荐伪元素+clearfix方案，统一用.clearfix类；现代项目优先用display:flow-root触发BFC；禁用空标签和全局clear重置，响应式下需同步调整清浮方式。
清除浮动最推荐使用 伪元素 + clearfix 方案，兼顾兼容性、语义性和可维护性。
统一采用 after 伪元素 clearfix
在项目根样式或通用工具类中定义标准 clearfix 类，所有需要清除浮动的容器统一添加该 class：
- 避免滥用
clear: both或额外空标签，保持 HTML 干净 - 兼容 IE8+，满足绝大多数项目需求（如需支持 IE6/7，可补充
zoom: 1） - 写法简洁明确，团队成员一看即懂用途
content: "";
display: table;
clear: both;
}
.clearfix { *zoom: 1; } /* IE6/7 兼容 */
优先用 BFC 触发替代手动清浮
对现代项目（不强求低版本 IE），更推荐通过触发 BFC 自然包裹浮动子元素，减少对 clear 的依赖：
- 给父容器设置
overflow: hidden、display: flow-root（推荐，无副作用）或float: left -
display: flow-root是目前最干净的方案，专为此设计，无截断溢出等副作用 - 适合布局组件（如 card、list-item）内部封装，提升模块独立性
禁用方式与团队约束建议
为保障一致性，项目规范中应明确禁止以下做法：
立即学习“前端免费学习笔记（深入）”；
- 在 HTML 中插入
<div style="clear:both"></div>等无意义标签 - 全局重置
* { clear: both; }—— 破坏预期行为且性能差 - 混用多种清浮方式（如部分用 overflow，部分用 after，部分用 clear）
可在 ESLint / Stylelint 中配置规则，自动检测并提示非标准写法。
响应式场景下的注意事项
清除浮动逻辑需随布局变化保持有效：
- 当媒体查询中改变子元素浮动状态（如从 float 切换为 flex），需同步调整或移除 clearfix
- 使用
display: flow-root时注意其不支持 IE，若需兼容，建议封装成 mixin 或 CSS 变量控制 - 组件级清浮建议写在组件样式内，而非全局，避免跨组件干扰
