浮动布局仍适用于图文环绕、旧系统维护及CMS内联样式，但因塌陷、外边距异常、响应式困难等缺陷，现代项目应优先选用Flexbox（一维）、Grid（二维）、多列布局（文本）等替代方案。
还能用，但不推荐作为新项目的首选布局方式。
浮动布局现在还能解决什么问题
浮动在特定场景下仍有实用价值：
- 图文环绕：比如文章中图片左浮、文字自动绕排，这是 float 最原始、最自然的用途，语义清晰、兼容性极好
- 简单两栏/三栏旧系统维护：部分老项目或需兼容 IE8 及更早版本时，float + clearfix 仍是稳妥选择
- 某些 CMS 或编辑器生成的内联样式：如 WordPress 的经典编辑器默认对图片加 float:left，直接支持比强行改写更省事
为什么现代项目应避开浮动做整体布局
核心问题是 float 的设计初衷不是布局，而是“文本环绕”。强行用于页面结构会带来一连串副作用：
- 父容器高度塌陷：浮动子元素脱离文档流，父元素无法自动撑高，必须额外清除（clearfix/BFC），否则边框、背景、后续元素全乱套
- 外边距行为不可控：margin-top/bottom 容易与兄弟元素塌陷或溢出到父级外部，调试成本高
- 响应式适配困难：浮动依赖固定宽度和手工计算 margin，媒体查询中频繁重设易出错
- 逻辑反直觉：右浮动从右往左排列、混合浮动时顺序难预测，可维护性差
现代主流替代方案怎么选
按使用频率和适用维度推荐：
立即学习“前端免费学习笔记（深入）”；
- 一维布局（行或列）→ 用 Flexbox：display: flex 天然解决对齐、等分、自适应、垂直居中，无需清除、无塌陷、代码简洁。例如导航栏、卡片列表、表单控件组
- 二维布局（网格状）→ 用 CSS Grid：display: grid 直接定义行列轨道，适合后台仪表盘、相册、复杂首页，语义强、控制粒度细
- 简单分栏文本 → 用多列布局（columns）：column-count 或 column-width，专为长文分栏设计，比 float 更语义化、更轻量
- 需要绝对定位辅助时 → 结合 position + transform：避免用 float 做“伪定位”，现代方案更可控
过渡与兼容处理建议
升级老项目或兼顾兼容时注意：
- Flexbox 支持到 IE10+（带 -ms- 前缀），IE9 及以下才真需 fallback 到 float
- 不要在 flex 容器里给子项设 float —— 它会被忽略，clear 也无效
- 响应式降级可写成：@media (max-width: 768px) { .container { display: block; } .item { float: left; width: 50%; } }，但务必在该断点内正确清除浮动
- 用 display: flow-root 替代 overflow: hidden 触发 BFC，更语义、无裁剪风险
