最快速可靠的判断依据是查看父容器height是否为0px；因浮动元素脱离文档流，父容器计算高度时直接忽略它们，导致height显示为0px或远小于预期——这是CSS规范行为而非bug。
直接看父容器 height 是否为 0px
这是最快速、最可靠的判断依据。浮动元素脱离文档流，父容器计算高度时直接忽略它们，导致 height 显示为 0px 或远小于预期——不是 bug，是规范行为。
操作步骤：
- 用
Ctrl+Shift+C（Win）或Cmd+Shift+C（Mac）点选错位区域中的任意子元素 - 在 Elements 面板中逐级向上点击父节点，在右侧 Computed 面板紧盯
height值 - 若某个
<div>、<section>的height是0px或几像素，但内部有float: left/float: right元素，基本锁定问题源头 - 再看该父容器的
overflow是否为visible（默认值），且display是block—— 这说明它既没触发 BFC，也没做清除
用边框法实时显形盒模型边界
不改源码、不刷新页面，靠视觉暴露“谁没占位”“谁被挤出”。关键不是加边框本身，而是观察边框之间的断裂与错位关系。
在 Console 中运行这行代码即可批量加边框：
立即学习“前端免费学习笔记（深入）”；
$$('div, section, article, header, footer, aside, main, p, h1, h2, h3, h4, h5, h6').forEach(el => el.style.border = '1px solid #f00')
重点关注三类异常：
- 父容器红框“断开”，但内部浮动子项红框完整延伸到右边缘 → 父容器未包裹子项，需触发 BFC
- 文字容器红框从顶部就被截断，文字从浮动图下方“钻出来” → 缺少清除或未创建新 BFC
- 多个并排浮动项中，某一个底部红框明显更低 → 可能内部有未闭合标签、
margin-bottom未撑开父级，或盒模型计算溢出
检查 clear: both 是否加在错误位置
clear: both 不是对浮动元素生效，而是让「当前元素」避开前面所有浮动的影响。加错地方等于没加，甚至打断正常流。
常见误操作：
- 把
clear: both写在浮动元素自身样式里（如.float-item { clear: both; }）→ 它只影响自己位置，不反馈给父容器 - 清除节点是
display: inline或display: flex元素 →clear对非块级元素无效 - 浮动元素后面根本没放任何兄弟块级元素（HTML 中直接闭合了父容器）→ 没地方可清
- 清除节点被
display: none或visibility: hidden隐藏 → 样式存在，但不参与布局
正确做法：清除节点必须是浮动元素之后**紧邻的块级兄弟元素**，且 HTML 结构中它得真正在浮动元素后面。
确认是否混用了 float 和 flex/grid
如果父容器已设 display: flex 或 display: grid，子元素上的 float 声明会被浏览器完全忽略（CSS 规范强制要求）。你看到的“错位”，其实是该子元素退回到文档流后，尺寸或对齐未重设所致。
验证方式：
- 在开发者工具中选中那个“应该浮动却没动”的元素
- 在 Computed 面板搜索
float→ 若显示left但 Layout 面板里的 Offset 没变化，说明float已被丢弃 - 此时加
clear、margin或z-index全无意义，应改用margin: auto、align-self等原生控制方式
真正难的不是怎么清浮动，而是判断这个布局是不是从一开始就不该用浮动——尤其当它和定位、Flex、Grid 混用时，问题会藏得更深，也更难靠单一 clear 解决。
