浮动错位主因是父容器未触发bfc且box-sizing不匹配；box-sizing:border-box可防宽度溢出但需配合bfc或清除浮动；混用float与flex/grid会导致布局失控，推荐弃用float改用现代布局。
浮动元素被父容器裁剪或换行
常见现象是 float: left 的子元素突然掉到下一行，或父容器高度塌陷、看不见浮动内容。根本原因常是父容器未触发 BFC，且子元素的 box-sizing 与 padding/border 计算方式不匹配，导致实际宽度超出容器。
- 父容器未清除浮动时，高度为 0，后续元素会上移覆盖浮动区
- 子元素设了
width: 100%+padding: 10px+box-sizing: content-box（默认），实际占宽 = 100% + 20px，必然溢出 - 用
overflow: hidden或display: flow-root触发 BFC，比clear: both更可靠
box-sizing: border-box 能否修复 float 宽度溢出
可以，但仅解决尺寸计算问题，不解决浮动脱离文档流带来的布局干扰。必须配合 BFC 或清除浮动使用。
-
box-sizing: border-box让width包含 padding 和 border，避免“100% + padding > 容器宽度” - 仍需确保浮动子元素总宽度（含 margin）≤ 父容器可用宽度，否则自动换行
- 推荐统一在全局重置：
*, *::before, *::after { box-sizing: border-box; }
float 元素与 flex / grid 并存时的冲突
现代布局中混用 float 和 display: flex 或 grid 极易错乱——float 会令元素脱离文档流，而 flex 容器只对直接子元素生效，对已浮动的子项失去控制力。
- flex 容器内的浮动子元素：不再参与主轴/交叉轴排列，可能重叠或偏移
- grid 容器中浮动无意义，
float属性会被忽略（CSS Grid 规范明确声明） - 解决方案：彻底移除
float，改用align-self、justify-self或margin: auto控制位置
调试浮动错位的三步检查法
不用猜，按顺序查这三项，90% 的错位能定位：
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具，选中浮动元素 → 检查 computed 栏中
box-sizing值是否为border-box，width+padding+border+margin是否 ≤ 父容器宽度 - 检查父容器是否设置了
overflow、display: flow-root或伪元素::after { content: ""; clear: both; display: table; } - 确认没有意外继承或全局样式将
float应用到不该浮动的兄弟元素上（比如某 class 通配符误写成.wrap * { float: left; }）
浮动本身没过时，但它的行为依赖上下文太强；box-sizing 是基础守门员，BFC 是关键开关，而真正省心的解法，往往是意识到“这里其实不需要 float”。
