浮动仅适用于图文环绕其他布局应优先使用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。 arXiv Xplorer ArXiv 语义搜索引擎帮您快速轻松的查找保存和下载arXiv文章。