浮动元素脱离文档流导致父容器高度塌陷、相邻元素换行错位、文字环绕截断及clear失效，根源在于盒模型计算偏差、BFC缺失与层叠上下文干扰，需结合Computed/Layout面板调试并用flex/grid或BFC方案修复。
浮动元素脱离文档流后父容器高度塌陷
这是最典型的错乱现象：父 <div> 看起来“没内容”，背景色不显示，后续元素向上顶上来。根本原因是 <code>float 元素已脱离普通文档流，父容器无法感知其高度。
调试时直接在开发者工具中选中父容器，在 Styles 面板里看 computed height 是否为 0px 或远小于预期；再切换到 Layout 面板（Chrome），勾选 “Show layer borders” 和 “Show box model”，能直观看到浮动子元素实际位置和父容器真实尺寸边界。
- 临时修复可加
overflow: hidden或overflow: auto到父容器（触发 BFC） - 更现代的解法是改用
display: flex或display: grid，彻底避开 float - 若必须保留 float，请确保父容器有清除机制，比如末尾加
<div style="clear: both"></div>
相邻浮动元素因宽度超限导致换行错位
两个 float: left 的盒子，明明总宽小于父容器，却意外换行——常见于未重置 box-sizing 或忽略了默认 margin/padding、边框、字体撑开的间隙。
在 Elements 面板中右键浮动元素 → “Break on attribute modification”，然后手动删掉 float 再加回去，观察布局是否瞬间跳变；或在 Styles 面板逐个禁用 margin、padding、border，看哪一项导致宽度溢出。
立即学习“前端免费学习笔记（深入）”；
- 务必检查 computed 样式中的
width+padding+border+margin总和 - 统一设置
*, *::before, *::after { box-sizing: border-box; }可大幅降低计算误差 - 用
calc(50% - 1px)替代写死像素值，避免小数像素累积偏移
文字环绕浮动图片时出现意外截断或重叠
常见于文章页图文混排：img { float: left; margin-right: 1em; } 后，右侧文字突然在某段中断行、甚至覆盖到图片上。本质是文字容器没有形成新的块格式化上下文（BFC），受浮动影响过深。
在开发者工具中选中文字段落，看 Computed 面板里 containing block 是谁；再检查该段落是否被设置了 overflow: visible（默认值，不创建 BFC）。
- 给文字容器加
overflow: hidden（最小侵入式修复） - 或改用
display: flow-root（语义清晰，专为此场景设计） - 避免对文字容器设
float或position: absolute，否则会加剧包裹混乱
清除浮动失效：clear 属性不起作用
clear: both 元素没压住上面的浮动？大概率是它本身也被浮动了，或者父容器用了 transform/opacity 等触发了新层叠上下文，导致清除逻辑失效。
在 Elements 面板中选中 clear 元素，看 Styles 面板里 float 是否非 none；再点 Computed → 搜索 position 和 transform，确认是否意外进入了新层叠上下文。
-
clear只对**同层**的浮动兄弟元素有效，对嵌套在其他浮动容器里的元素无效 - 如果父容器有
transform: translateZ(0)或will-change: transform，尝试临时禁用，看清除是否恢复 - 优先用伪元素清除：
::after { content: ""; display: table; clear: both; }，比空标签更可靠
浮动布局的错乱往往不是单一原因，而是多个脱离流、层叠上下文、盒模型计算叠加的结果。开发者工具里不要只盯 HTML 结构，多切到 Computed 和 Layout 面板，把“看起来应该这样”换成“浏览器实际算出来是这样”。
