为什么说CSS浮动是网页布局的基石？

浮动不再是布局基石，因其设计初衷仅为图文环绕，强行用于大面积布局会导致父容器塌陷、清除逻辑冗余、响应式不可控；现代应优先采用Flexbox解决一维布局、Grid解决二维布局，仅图文环绕和IE8–10兼容等极少数场景仍需保留float。

浮动不是“基石”了，它曾经是，但现在只是特定场景下的可选工具。

float:left 和 float:right 为什么曾被当作布局核心

在 Flexbox 和 Grid 出现前，float 是唯一能让多个 p 在一行并排、且不带空隙的可靠方式。标准流里块级元素天然换行，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，也得同步处理父容器塌陷——否则后面的内容会“塌”进浮动区下面，这种问题在响应式断点切换时尤其隐蔽。