float不能作为主布局手段，仅适用于图文混排文字环绕和IE8–IE10遗留系统维护；其脱离文档流导致塌陷、无法垂直对齐、响应式适配差等缺陷已被Flex/Grid取代。
float 还能用在现代 CSS 布局中吗
不能作为主布局手段使用。自 display: flex 和 display: grid 成为标准后，float 已退出页面整体布局的历史舞台。浏览器虽仍完全支持它，但 W3C 规范已明确将其定位为「文本环绕工具」而非布局机制。
哪些场景下必须用 float
仅剩两类不可替代的用途：图文混排中的文字环绕，以及极少数需要兼容 IE8–IE10 的遗留系统维护。其他所谓“清除浮动”“float 实现两栏”等方案，现在都有更健壮、语义更清晰的替代方式。
- 当
float: right仍是唯一无需 JS 或额外容器的原生方案 - 旧 CMS 模板中大量依赖
float+clear实现栏目排列，改用 Flex/Grid 可能牵扯整套渲染逻辑，此时保留比重写更实际 - 某些打印样式表（
@media print）中，float对分栏、图片定位的控制仍比 Flex 更可预测
用 float 做布局会踩什么坑
最典型问题是脱离文档流导致父容器高度塌陷，进而引发后续元素错位——这不是 bug，而是 float 的设计本意。开发者常靠 overflow: hidden 或伪元素 ::after { content: ""; display: table; clear: both; } 补救，但这些属于 hack，无法响应式适配，也不适用于 flex 容器子项。
-
float元素无法设置vertical-align，垂直对齐只能靠 margin/padding 拼凑 - 响应式断点中，
float: left在小屏下不会自动换行，必须配合width+max-width手动控制，而 Flex/Grid 可直接用flex-wrap或grid-auto-flow - 与
position: sticky、transform等现代属性组合时，渲染行为在 Safari 和旧 Edge 中不一致
替代 float 文字环绕的现代方案有哪些
目前没有纯 CSS 的 float 功能等价物。CSS Shapes（如 shape-outside: circle()）可实现更复杂的环绕，但兼容性差（Chrome/Edge 支持，Firefox 仅部分支持，Safari 不支持）。所以只要需求是「简单左/右环绕」，float 仍是唯一可靠选择。
立即学习“前端免费学习笔记（深入）”；
img {
float: left;
margin-right: 1em;
margin-bottom: 0.5em;
}
若需多图并排环绕（如杂志式排版），float 依然比 display: inline-block 更省心——后者受 HTML 空格影响，且难以精确控制基线对齐。
