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