现代项目不应再用 float 布局，因其本质是为图文环绕设计，会导致高度塌陷、文档流脱标、响应式错位等问题；应直接用 flex 或 grid 替代，原生支持对齐、换行、自动伸缩，无需清除浮动或 hack。
直接用 display: flex 或 display: grid 替换 float 布局，不加清除、不依赖伪元素、不 hack overflow，就能彻底绕过高度塌陷和文档流脱标问题。
为什么 float 布局在现代项目里不该再用
float 本质是为图文环绕设计的，不是布局工具。它强制元素脱离文档流，导致父容器无法感知子元素高度，进而引发高度塌陷；同时 float 元素之间会相互影响（比如右浮动元素可能被左浮动“挤走”），响应式断点切换时极易错位。这些都不是 bug，而是 float 的原始语义决定的。
- 所有基于
float的多栏布局（如双栏、三栏）都隐含 BFC 创建成本，且必须手动清除浮动 -
clear: both或overflow: hidden是补救措施，不是布局逻辑本身 - Flex/Grid 原生支持对齐、换行、自动伸缩，而 float 需要额外计算宽度、处理间隙、适配 IE 兼容性
用 flex 替换 float 的三步实操
把原来写成 .left { float: left; width: 60%; } 和 .right { float: right; width: 40%; } 的结构，改造成 Flex 容器即可。关键不是“怎么写”，而是“怎么想”：
- 父容器加
display: flex，子元素默认水平排列，无需float - 用
flex: 1、flex: 2或flex-basis控制比例，比写死width更健壮 - 移除所有
clear、:after伪元素、overflow: hidden等“浮动后遗症”样式 - 若需垂直居中，直接加
align-items: center；换行用flex-wrap: wrap，不用再算总宽防溢出
grid 布局更适合固定结构的卡片/网格场景
当页面是明确的行列结构（比如商品列表、仪表盘卡片、表单分组），display: grid 比 flex 更直接。它不依赖子元素顺序，也不需要“先 float 左再 float 右”的心智负担：
- 用
grid-template-columns: 1fr 2fr替代float: left+float: right - 用
grid-column: span 2让某个卡片横跨两列，无需额外包裹或定位 - 父容器高度自动撑开，完全不存在塌陷问题——因为 grid 子项从不脱离文档流
- 响应式只需改
grid-template-columns，比如@media (max-width: 768px) { grid-template-columns: 1fr; }
过渡期兼容处理与容易忽略的细节
老项目不能一夜重写，但可以渐进替换。最容易被忽略的是：float 布局常伴随隐式 display: block 和宽度收缩行为，而 flex/grid 下子元素默认是 display: flex-item 或 display: grid-item，它们会忽略 float 属性，但也会改变原有尺寸表现：
- 如果子元素原本是
inline或inline-block，加了display: flex后会变成块级行为，可能需要加align-self: start或调整margin - 旧代码里用
float实现的“文字环绕图片”，现在应改用shape-outside或float+clear仅限该场景保留（这是 float 唯一没被替代的合理用途） - 某些 CSS 框架（如 Bootstrap 4）仍带 float 栅格，升级到 Bootstrap 5 后默认启用 flex，此时必须同步移除自定义的 clearfix 类
真正麻烦的从来不是语法转换，而是那些散落在 JS 里、靠 offsetHeight 读取浮动后高度的逻辑——它们在 flex/grid 下会返回错误值，必须重测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
