现代前端框架不再推荐使用Float布局，因其与Flex/Grid模型冲突，React/Vue中float被静默忽略、SSR下导致塌陷、CSS-in-JS默认禁用，仅剩邮件模板和图文环绕等不可替代场景。
不重要，而且不该主动用。
为什么现代框架里几乎看不到 float 布局
React、Vue 组件的样式层根本不会把 float 当作布局手段——不是框架限制，而是模型冲突。你写 style={{ float: 'left' }}，在 React 18 的 concurrent rendering 下可能被跳过；写 class="sidebar" 并在 CSS 里设 float: left，组件库（如 Ant Design）的栅格系统会直接忽略它，因为它的容器早就是 display: flex 或 display: grid。
-
float在flex容器中被浏览器静默丢弃，不报错也不生效 -
float在grid容器中被规范明确忽略，写了等于没写 - 主流 CSS-in-JS 方案（Emotion、Styled Components）默认启用 lint 规则禁止
float相关属性 - SSR 渲染时，
float导致父容器高度塌陷，破坏首屏 DOM 高度计算，影响滚动定位和 SEO
哪些场景下你还得处理 float 和 clearfix
只存在于历史包袱或语义刚需中，不是“技术选型”，而是“不得不兜底”：
- CMS 富文本输出的正文：图片带
float: left，文字环绕是内容语义，::after { clear: both }只为不让段落容器塌陷 - 维护 IE11 兼容的老系统：
display: flex不可用，clearfix是唯一能稳住高度的方案 - 邮件模板：客户端（如 Outlook）对 Flex/Grid 支持极差，
float仍是少数可靠手段
注意：display: flow-root 是比 clearfix 更干净的替代，但仅适用于你能改父容器样式、又不能动 HTML 结构的场景。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
混用 float 和 Flex/Grid 是最危险的坑
常见翻车点不是“没清浮动”，而是“以为清了就没事”。比如：
- 父容器设了
display: flex，子项却还留着float: left—— 浏览器忽略float，但开发者误以为它还在控制位置，结果justify-content失效、换行异常 - 媒体查询里反复切
float: none+clear: both，而实际只需改flex-direction或grid-template-columns - 用
overflow: hidden清浮动，却意外裁剪了position: absolute的 tooltip 或下拉菜单
这类问题往往嵌套越深越难定位，调试时容易陷入“样式没生效”的假象，实际是两种互斥模型在悄悄打架。
真正要警惕的，不是“会不会写 clearfix”，而是“为什么还在用 float 做布局”。一旦项目主布局已基于 Flex/Grid，任何残留的 float 都不是功能补充，而是潜在的渲染雷区。
