float本质是图文环绕排版指令，非布局工具；它使元素脱离块级流但保留在行内上下文中，仅文字等行内内容会环绕，父容器高度塌陷是规范行为而非bug。
现代CSS规范没有“边缘化”float，它压根就没把它当排版功能设计过——float从1996年诞生起，就只是为图文环绕服务的排版指令，不是布局工具。
float 从来就不是为页面结构设计的
浏览器引擎对 float 的处理逻辑非常明确：它让元素退出块级流（block formatting context），但保留在行内上下文（inline formatting context）中，只为支持文字绕行。这意味着：
-
float元素不参与父容器高度计算，这是规范行为，不是 bug - 后续块级元素不会“绕开”它，而是直接忽略它的存在，从它原本该在的位置开始渲染
- 只有行内内容（文字、
span等）会自动重排以适应浮动边界
为什么开发者曾误用 float 做布局
2000 年代初，display: inline-block 受 HTML 空格干扰，table 布局语义混乱，而 float 能让多个块级元素横向紧贴、不换行、可设宽高——这种“副作用”被当成能力广泛滥用。但代价立刻显现：
- 父容器必须手动触发 BFC（如
overflow: hidden或::after.clearfix）才能避免塌陷 -
clear只作用于自身上边界，无法控制子项对齐或换行逻辑 - 响应式断点中，
float: none后若漏掉clear: both，旧浮动状态可能残留，导致错行
Flexbox 和 Grid 是从模型层面替代 float
它们不是“更好用的 float”，而是彻底重构了布局契约：
-
display: flex容器天然不塌陷，子项是“项目”而非“浮动体”，justify-content和gap直接控制分布逻辑 -
display: grid提供二维坐标系统，grid-template-areas让语义与视觉分离，无需依赖元素顺序 - 所有现代框架（Bootstrap 5、Chakra UI、Mantine）的栅格系统已完全移除
float相关 API，clear类在源码中基本消失
float 还剩哪些不可替代的真实场景
真正绕不开的只剩极窄路径：
- 邮件模板：Outlook 等客户端仍严重依赖
float实现多栏兼容 - 图文环绕：
img { float: left; margin-right: 1em; }在所有浏览器中表现最稳定，shape-outside兼容性差且性能开销大 - 某些老系统维护：IE8–10 必须用
float + clearfix，而display: flow-root在 Chrome 64+ 才支持
最容易被忽略的是：哪怕只在一个 aside 里用一次 float: right，也得同步确保其父容器触发 BFC，否则后续内容会“塌”进浮动区下方——这个隐患在响应式切换时尤其隐蔽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
