float唯一不可替代的语义场景是文字环绕图片或侧边栏；其他布局需求应优先使用flex或grid，避免混用导致渲染异常，父容器塌陷需用display: flow-root而非overflow: hidden。
文字环绕是float唯一不可替代的语义场景
现代CSS里，float 的存在价值几乎被压缩到只剩一个：让段落文字自然绕排在图片或侧边栏周围。这不是历史惯性，而是语义层面的刚性需求——flex 和 grid 把容器当整体布局，不感知“流内某一块需要被文字主动绕开”；而 float 从诞生起就为此设计，浏览器对它的环绕计算逻辑最成熟、最稳定。
常见错误现象：float: left 加在卡片上，本想做两栏布局，结果正文段落也跟着绕进去了，标题错位、按钮被挤到图下方。这不是写法不对，是误用了语义。
- 仅当目标是“一段
<p>紧跟<img>，文字从右侧开始、自动换行到图片下方”时，float才是正解 - 若只是想并排显示多个块（如导航项、商品卡片），
display: flex或display: grid更直接，且不会引发后续元素错位 -
shape-outside可扩展非矩形环绕，但兼容性有限；纯矩形环绕，float仍是覆盖所有主流浏览器的唯一零配置方案
父容器塌陷不是bug，是float脱离文档流的必然结果
只要用了 float，父容器高度为 0 就不是意外，而是规范行为。因为浮动元素已不在文档流中，父容器自然“看不见”它。这个副作用无法规避，只能应对。
容易踩的坑：用 overflow: hidden 强制触发 BFC 来撑高父容器，结果下拉菜单、box-shadow、transform 溢出部分全被裁掉。
立即学习“前端免费学习笔记（深入）”；
- 首选方案：
display: flow-root—— 专为此设计，无副作用，Chrome 64+/Firefox 59+/Safari 15.4+ 全支持（2026年已足够稳妥） - 兼容 IE9–10？必须用
::after伪元素 +clear: both，但注意 IE8 不支持伪元素，得退化为手动加<div style="clear:both"></div> - 别给父容器硬设
height，一换内容就崩，且破坏响应式
混用float和flex/grid会放大不可控性
浮动元素一旦进入 flex 容器或 grid 区域，浏览器渲染行为可能偏离预期：尺寸计算异常、层叠上下文错乱、甚至触发连续 layout。这不是兼容性问题，而是模型冲突。
典型表现：一个 float: left 的图片放在 display: flex 的文章头部里，右侧标题没对齐，文字环绕失效，调试时发现 float 被忽略或部分生效。
- 同一容器内，不要同时使用
float和display: flex/display: grid - 图文环绕需独立封装：把
<img>和紧邻的<p>包进一个display: flow-root容器，外部用 flex 布局其他模块 - IE9–10 兼容项目若必须用 float 做整体布局，就全程用 float + clearfix，别中途切 flex
真正容易被忽略的不是“怎么清浮动”，而是“是否真需要它”
很多布局问题，根源不在清除技巧多难，而在一开始就不该选 float。比如用 float: left 实现响应式两栏，断点切换时宽度计算误差、换行错位、清除逻辑重复，远比写两行 display: flex + flex-wrap 更耗时。
现代项目里，float 的合理使用频率极低。它不是被淘汰了，而是被精准收束到一个窄口：你正在写的那段 HTML，是否明确需要“文字流主动绕开某一块”？如果不是，立刻换 flex 或 grid。
