浮动未被淘汰，而是因设计目标与现代布局需求错位而不该出现在新布局选型中；它导致父容器高度塌陷、影响邻近行内内容，且与flexbox/grid模型不兼容。

浮动不是被“淘汰”，而是它压根就不该出现在现代布局的选型列表里——它的设计目标和现代页面需求根本错位。

float 一上，父容器高度就塌陷是必然结果，不是 bug

浮动元素会脱离文档流，但又不完全脱离（仍影响邻近行内内容），所以父容器无法感知其存在。你看到背景色消失、footer 上移、border-bottom 不显示，不是漏写了样式，而是模型层面的必然行为。

• overflow: hidden 能“撑开”高度，但会意外裁剪 position: absolute 的下拉菜单或 tooltip
• ::after { clear: both } 需要额外伪元素，且若父容器本身有 height 或 max-height，可能触发非预期滚动条
• display: flow-root 是标准清除方案，但它只该用于兜底老代码，新布局不该以“需要清浮动”为前提来设计

Flexbox 用两行代码解决 float 十年补丁

当你需要导航栏、卡片列表、表单分组这类线性排列时，display: flex 不是“比 float 好一点”，而是直接消除了所有 hack 场景。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 父容器自动包裹子项，height 不再塌陷，无需 ::after { clear: both }
• justify-content 控制水平对齐，align-items 控制垂直对齐，不用 margin 负值或 position: absolute
• flex-wrap: wrap 让元素在空间不足时自动换行，且换行后父容器仍能正确撑高
• 响应式只需改 flex-direction 或 flex-basis，不用在每个断点重复写 float: none + width + clear

Grid 在二维场景下让 float 彻底失去语义

一旦涉及“同时控制行和列”的布局——比如后台仪表盘、商品网格、带固定侧边栏的编辑页——display: grid 就不是替代，而是降维打击。

• grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 一行定义自适应列数，无需媒体查询堆砌
• 模块位置调整只需改 grid-area 名字，HTML 结构完全不动
• gap 统一控制行列间距，避免 margin 叠加和清除逻辑
• 浮动元素放进 grid 容器里会自动失效：float 和 clear 在 grid 上下文中无意义，浏览器直接忽略

还在 display: flex 容器里写 float: left？这是最危险的混用

这不是“多写一行没影响”，而是会触发不可预测的渲染冲突：浮动元素在 flex 容器中既不参与主轴排列，又可能干扰交叉轴计算，尤其在嵌套结构里，bug 往往藏得深、复现难。

• React/Vue 组件的 style 或 className 中主动写 float: left，就像在 TypeScript 里手动管理内存——模型层面不兼容
• 主流 UI 库（Ant Design、Chakra UI 等）的栅格系统、卡片容器全部基于 flex 或 grid 实现，因为 float 无法通过 props 动态控制对齐、换行、间距
• SSR 或 hydrate 过程中，float 导致的高度塌陷会破坏首屏 DOM 高度计算，影响滚动定位和 SEO

真正难的不是语法不会写，而是忘了 float 的“脱离文档流”预期在 flex/grid 里根本不存在——你不需要“清除”，也不该想着“怎么让它浮起来”。一旦开始问“这个区域的数据流方向是什么？主轴和交叉轴如何定义？哪些项该收缩？哪些该撑满？”，float 就自然退场了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！