一眼看出浮动塌陷：检查父容器computed中height和offsetheight是否接近0，悬停高亮缩成细线即证实塌陷；clear: both仅对浮动后首个块级兄弟元素生效，非万能清浮动方案。
错位不是样式写错了，而是浮动元素脱离文档流后，父容器高度塌陷 + 宽度计算失控的必然结果。直接看父容器是否“包得住”子项，比一行行调 float 和 clear 有效得多。
怎么一眼看出是浮动导致的塌陷？
打开开发者工具，选中浮动元素的直接父容器，在「Computed」面板里看 height 和 offsetHeight：如果两者都接近 0 或远小于视觉高度，基本就是塌陷了。此时鼠标悬停在父容器上，高亮区域会缩成一条线甚至消失——那底下所有内容其实都“浮在空气里”。
- 点不到按钮、hover 不生效、下方内容顶上来，90% 是这个原因
-
getBoundingClientRect()返回的top值异常偏小，也常源于此 - 别信「父容器有 padding 就一定有高度」——padding 不参与 layout 高度计算，塌陷时照样无效
为什么加了 clear: both 还是没用？
clear: both 不是“清浮动”，而是“让当前块级元素避开上方浮动兄弟”。它只对文档流中的块级元素生效，且必须写在浮动元素之后、第一个仍在文档流里的位置。
- 给浮动元素自己加
clear: left—— 完全无效，它不控制同行与否 - 把
clear写在<footer></footer>上，中间隔着未清除的父容器 —— 清除动作找不到参照物 - 用
<div style="clear:both"></div>放在浮动后，但该div被设了display: inline—— 不是块级，clear失效
如何快速验证是不是宽度超限引发换行错位？
浮动换行错位，八成是某几个元素实际占宽超过了 100%。用开发者工具逐个选中浮动子项，看「Layout」标签页里的 width、padding、border 和 margin 总和是否溢出。
- 检查是否漏了
box-sizing: border-box—— 没它，width: 25%+padding: 8px必然超 - HTML 中浮动元素之间有换行或空格？渲染器可能插入约
4px间隙 - 父容器有
padding却没在子项width计算里扣除 —— 用calc(25% - 8px)替代纯百分比
为什么改用 flex 后还是有错位？
Flex 解决了脱离文档流和宽度失控问题，但不会自动修复 JS 里对旧布局的隐式依赖。很多错位迁移到 Flex 后才暴露出来。
-
offsetTop、getBoundingClientRect()的返回值变了，动画起点或碰撞检测逻辑需重测 - 原来靠
float辅助position: absolute定位的菜单，现在得手动给触发项加position: relative - 监听
resize后靠getComputedStyle(el).height判断“清除完成”的逻辑，Flex 下父容器高度天然准确，这类判断可删
真正卡住的从来不是 CSS 属性怎么写，而是那些散落在 JS 里的“假设浮动已生效”的判断。不翻代码只调样式，修不完。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
