css浮动现仅适用于文字环绕图片等经典场景，因其脱离文档流导致高度塌陷、响应式错位、可访问性差等问题，现代布局应优先使用flexbox或grid。
css 浮动（float）现在基本只该用在文字环绕图片这种老场景，网页布局别再用它了——现代浏览器里用 float 做整体布局，大概率会掉进清除浮动、高度塌陷、响应式错位这些坑里。
为什么 float 布局现在不推荐
浮动本意是让文字绕排图片，不是为多列布局设计的。强行用 float 搭页面结构，会立刻遇到几个硬伤：
-
float元素脱离文档流，父容器高度经常变成 0（即“塌陷”），得额外加clear或伪元素补救 - 响应式断点下，
float列宽计算脆弱，width稍有误差就换行错乱 - IE8+ 虽支持，但 Flexbox 和 Grid 在所有现代浏览器中已稳定多年，兼容性反而更好
- 可访问性和语义化更差：屏幕阅读器对浮动区域的顺序解析容易出错
float: left 还能用在哪？
真正适合 float 的地方其实很窄，集中在图文混排这类经典需求：
- 文章正文里一张图靠左/右，文字自动环绕（
float: left或float: right） - 小图标 + 文字标签并排显示（比如表单里的
label和input靠左对齐） - 极简侧边栏（仅限固定宽、无响应要求的老系统）
示例（文字环绕）：
@@##@@ <p>这是围绕图片的文字内容……</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
注意：margin 必须显式加，否则文字会紧贴图片边缘；也别忘了给图片设 width，否则可能撑破容器。
清除浮动（clear）怎么写才不翻车
只要用了 float，后面紧跟的元素很可能被“顶”到错误位置，这时必须干预。最稳妥的做法不是在浮动元素上加 clear，而是在它的父容器末尾插入一个“清道夫”：
- 用伪元素（推荐）：
::after+content: ""+clear: both，不污染 HTML 结构 - 避免用
<div style="clear: both"></div>，纯 HTML 清除会增加冗余节点 - 千万别只对某个兄弟元素加
clear: left—— 它只管左边有没有浮动，右边照样塌陷
标准清除写法（加在父容器上）：
.container::after {
content: "";
display: table;
clear: both;
}
想实现两栏/三栏布局？直接跳过 float
现在该用什么替代？两个明确选择：
- 简单等宽/自适应多栏 → 用
display: flex，一行代码搞定对齐和换行控制（flex-wrap） - 复杂网格（如后台列表、卡片墙）→ 用
display: grid，列宽、间距、跨行一目了然 - 如果必须兼容 IE9 及以下（极少数政企老系统），才考虑
float+calc()计算宽度，但务必测试所有视口尺寸
Flex 示例（两栏）：
.layout {
display: flex;
}
.sidebar { width: 240px; }
.main { flex: 1; }
浮动不是“过时技术”，而是“用途被严重误读的技术”。它没消失，只是被严格限定在图文环绕这个原始角色里。越想拿它撑起整个页面，越容易在调试上浪费半天——尤其是当别人接手你写的 float 布局时，第一反应往往是重写成 Flex。
