浮动不再是布局基石，因其设计初衷仅为图文环绕，强行用于大面积布局会导致父容器塌陷、清除逻辑冗余、响应式不可控；现代应优先采用Flexbox解决一维布局、Grid解决二维布局，仅图文环绕和IE8–10兼容等极少数场景仍需保留float。
浮动不是“基石”了，它曾经是，但现在只是特定场景下的可选工具。
float:left 和 float:right 为什么曾被当作布局核心
在 Flexbox 和 Grid 出现前，float 是唯一能让多个 div 在一行并排、且不带空隙的可靠方式。标准流里块级元素天然换行，display:inline-block 会因 HTML 空格产生不可控间隙，而 float 能让盒子紧贴排列，同时支持图文环绕——这正好匹配印刷排版逻辑，所以早期 CMS、博客、新闻站大量依赖它实现多栏、侧边栏、图左文右等结构。
-
float让块级元素“脱标”，不再占文档流位置，后续元素会绕行或上浮 - 浮动元素自动变成“类似块级”的行为：可设宽高、margin/padding 全生效
- 多个同向浮动元素会自动水平堆叠，溢出时才折行，比表格布局更灵活
为什么现在不能把它当“基石”用了
因为 float 的副作用太硬：父容器高度塌陷、需要手动清除（clear:both 或伪元素）、响应式调整困难、嵌套复杂时极易错位。现代布局已转向语义清晰、控制直接的方案：
-
display:flex天然解决主轴/交叉轴对齐、等高、顺序重排、响应式换行等问题 -
display:grid提供二维坐标控制，适合复杂区域划分（如 header/main/aside/footer） - 甚至
display:contents+gap都比浮动更轻量、更可预测
哪些地方还必须用 float
真正绕不开 float 的场景其实很窄，但确实存在：
立即学习“前端免费学习笔记（深入）”；
- 旧系统维护：IE8–10 不支持 Flexbox，只能靠
float+clearfix - 文字环绕图片：
img { float: left; margin-right: 1em; }仍是目前最稳定、兼容性最好的方案 - 某些 CSS 动画效果：比如模拟“飘入”或“抽离”动效时，配合
transition操作float值仍比定位更省事 - 极简 polyfill 场景：不想引入 Flexbox fallback 逻辑时，用
float快速对齐两个按钮
真正容易被忽略的点是：哪怕只用一次 float，也得同步处理父容器塌陷——否则后面的内容会“塌”进浮动区下面，这种问题在响应式断点切换时尤其隐蔽。
