优先用 display: flow-root 清除浮动，兼容性好；次选伪元素 clearfix；避免 overflow: hidden；clear 只对前一个浮动兄弟生效；float 本质是图文环绕，现代布局应优先用 Flex/Grid。
父容器高度塌陷导致后续元素上移
这是最典型的症状：浮动子元素没撑开父容器，.container 的 border 看起来像一条线，紧贴着顶部，而后面的 .footer 直接“钻”进浮动区域里。根本原因是 float 让元素脱离文档流，父容器计算高度时直接忽略它们。
实操建议：
- 优先尝试
display: flow-root—— 一行代码创建 BFC，不隐藏溢出、不污染 DOM、现代浏览器全覆盖（Chrome 64+/Firefox 58+/Safari 15.4+） - 若需兼容 IE11 或旧版 Safari，改用伪元素
.clearfix::after，注意必须声明content: ""和display: block，否则无效 - 避免用
overflow: hidden，它会裁剪position: absolute子元素、box-shadow、transform 位移后的内容，排查时容易漏掉
clear:both 失效或清除范围不对
写了 clear: both 却没起作用？常见于：该元素本身没参与文档流（比如也设了 float）、或它和浮动元素不在同一个 BFC 内、或被 display: none / visibility: hidden 隐藏了但样式仍存在。
实操建议：
-
clear只对**紧邻的前一个浮动兄弟元素**生效，不是“清空所有浮动”，所以要确保它写在浮动元素之后、且是块级元素 - 如果父容器用了
display: flex或grid，子元素即使float也基本失效 —— 这时clear自然无意义，应直接删掉浮动相关样式 - 调试时临时加
background: red和border: 1px solid到待清除元素，确认它是否真的渲染、是否被其他样式压制
float:left 和 float:right 混用时布局错乱
左右浮动同时存在，本意是左图右文，结果右边元素“掉下来”到下一行，或者两个都挤在左边——多半因为容器宽度不够、或中间有未清除的换行符/空格、或浮动元素自身设置了 margin 导致总宽超限。
实操建议：
- 用
box-sizing: border-box统一盒模型，避免padding/border溢出引发换行 - 浮动元素之间不要留 HTML 空格或换行，或给父容器设
font-size: 0，子元素再单独设字体大小（老项目常用 trick） - 更稳妥的做法：把左右结构改为
display: flex，用justify-content: space-between或margin-left: auto控制右侧元素，彻底绕过 float 的宽度计算陷阱
响应式断点下浮动突然失效或重排异常
媒体查询中改了宽度，浮动元素却不再并排、甚至堆叠错位。这是因为 float 对容器尺寸极其敏感：哪怕小数像素偏差、或字体缩放导致行高微变，都可能触发换行。
实操建议：
- 避免在媒体查询中只改单侧浮动（如从
float: left改成float: right），优先用flex-direction: row-reverse替代 - 检查是否用了
calc()计算宽度，IE 或旧 Safari 对calc(100% - 20px)渲染不稳定，可改用flex: 1或 CSS Grid 的grid-template-columns - 移动端慎用 float 布局，特别是图文混排场景——
shape-outside+float在 iOS Safari 上支持不一致，容易出现文字包裹异常
真正麻烦的从来不是“怎么清浮动”，而是“为什么非得用 float”。很多所谓“清除问题”，其实是把 float 当成了布局工具，而它本质只是为图文环绕设计的排版属性。现代项目里，看到 float 就该多问一句：这里是不是其实该用 display: grid 或 inline-flex？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
