浮动仅适用于图文环绕，其他布局应优先使用flexbox或grid；父容器塌陷可通过display: flow-root触发BFC解决；现代项目除需兼容IE9及以下外无需用float。
浮动还在用？先确认是不是真需要文本环绕
现在还用 float 做布局，大概率是踩了历史惯性坑。CSS 浮动的唯一合理存在场景，就是让文字自然绕排在图片或侧边栏周围——比如新闻正文里一张左对齐的配图，文字从右边和下方流过去。除此之外，无论是导航栏、卡片网格、表单排列，都该用 flexbox 或 grid 替代。
常见错误现象：float: left 一加，父容器高度塌陷，后续元素上移；或者多个浮动块错位，还得硬加 clear: both 清除；更麻烦的是响应式断点里，浮动行为难以预测，经常要写一堆媒体查询去“修”。
- 只在图文混排（如博客正文、杂志式排版）中考虑
float - 若目标是“并排显示几个块”，直接上
display: flex - 若想控制行列间距、对齐方式、自动换行，
display: grid更稳
浮动导致父容器高度塌陷怎么办
这是浮动最经典的副作用：父元素没设置高度，子元素一浮动，它就“看不见”子元素了，高度变成 0。不是 bug，是规范定义的行为——浮动元素脱离文档流。
解决思路不是强行撑高，而是触发 BFC（块级格式化上下文）。现代写法比老式的 overflow: hidden 更可控：
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
display: flow-root—— 语义清晰、无副作用，推荐首选 - 备选：
overflow: auto或overflow: hidden，但要注意可能意外截掉阴影或下拉菜单 - 避免用
clear: both在末尾加空 div，既冗余又破坏语义
浮动与 Flex/Grid 的性能和兼容性差异
float 渲染开销其实不比 flex 高，问题出在维护成本和隐式依赖上。浏览器对浮动的重排逻辑更复杂，尤其在频繁增删 DOM 或动画时，容易触发连续 layout。
兼容性方面：float 全平台支持，但 flex 在 IE10+、grid 在 IE11+ 也已足够覆盖主流场景。真正卡住的不是浏览器，而是开发者对旧习惯的路径依赖。
- 移动端 Safari 对
float的文本环绕有细微渲染差异，而flex行为一致 -
grid支持subgrid（部分浏览器已支持），能解深层嵌套布局难题，float完全无法应对 - 如果项目还需支持 IE9 及更早版本，才需保留
float作为降级方案，但这类需求现在极少
替代浮动的现代写法示例
比如一个带图的简介区块，传统用 float: left，现在可以这样写：
.bio {
display: grid;
grid-template-columns: 80px 1fr;
gap: 12px;
align-items: start;
}
.bio img {
width: 80px;
height: 80px;
border-radius: 4px;
}
.bio p {
margin: 0;
}
这段代码不用浮动、不触发塌陷、响应式改列宽一行搞定。如果真要文本环绕（比如文章内嵌图），那就老老实实用 float: left + margin-right，别硬套 flex 去“模拟”——绕排逻辑是浮动原生支持的，其他方案都要 hack。
真正难的不是语法选择，而是每次写样式前，先问一句：这里到底需不需要文字绕着它走？绕不了，就别碰 float。
