浮动元素脱离文档流导致父容器高度塌陷，表现为高度为0、背景边框错位；验证需检查computed样式中height值，清除浮动推荐伪元素法（::after{content:"";display:table;clear:both}）。
浮动元素脱离文档流导致父容器高度塌陷
这是最常见也最容易被忽略的问题：当子元素设置了 float: left 或 float: right，它会脱离普通文档流，父容器无法感知其高度，从而表现为“高度为 0”，背景、边框、清除浮动的兄弟元素都会错位。
验证方法很简单：给父容器加个临时 border: 1px solid red，再打开浏览器开发者工具，鼠标悬停父元素看计算高度是否为 0。
- 不要只看 HTML 结构是否“看起来嵌套正确”，要检查 computed 样式中
height和overflow的实际值 - 如果父容器本身也设置了
float，那它同样脱离文档流——此时得往上再查一级容器 - 用
display: flex或display: grid替代浮动布局时，这个现象不会出现，但老项目改造需注意兼容性断层
清除浮动的三种写法及其适用场景
不是所有清除方式都等效。现代开发中推荐用 overflow: hidden 或伪元素，但它们触发机制和副作用不同。
-
overflow: hidden：简单直接，但会裁剪溢出内容（比如下拉菜单、负 margin 元素），且在 Safari 中对transform元素可能引发渲染异常 -
::after { content: ""; display: table; clear: both; }：最稳妥的通用方案，兼容 IE8+，不干扰布局逻辑，推荐作为默认选择 -
clear: both单独加在空标签上（如<div style="clear:both"></div>）：有效但污染 HTML 结构，不利于维护，仅限快速调试时临时使用
父级有 transform 或 will-change 后清除失效
当父容器设置了 transform（哪怕只是 transform: translateZ(0)）或 will-change: transform，它会创建新的层叠上下文（stacking context）和**块格式化上下文（BFC）**，此时 overflow: hidden 仍能生效，但基于 display: table 的伪元素清除可能在某些 Chrome 版本中失效。
立即学习“前端免费学习笔记（深入）”；
调试时可临时移除这些属性确认是否为根因；若必须保留，优先改用 overflow: auto（比 hidden 更安全，滚动条仅在必要时出现）或升级为 Flex 布局。
- Chrome DevTools 的 Layers 面板可查看是否意外触发了新图层，影响 BFC 行为
- 移动端 WebView（尤其是旧版 Android）对
will-change的处理更不稳定，建议仅对高频重绘区域谨慎启用
浮动元素被父级 overflow: hidden 裁剪却没报错
这不是 bug，是 CSS 规范行为：浮动元素一旦超出设置了 overflow: hidden 的父容器边界，就会被静默裁剪，控制台不报错、也不警告，非常难定位。
典型表现是“右边元素突然消失”或“hover 效果在边缘失效”。排查时重点看浮动元素的 width + margin + padding + border 总和是否超过父容器可用宽度（注意 box-sizing 是否为 border-box）。
- 用 DevTools 的 Layout 网格线（Grid overlay）辅助判断尺寸关系
- 临时把父容器
overflow改成visible，观察浮动元素是否“弹出来” - 避免在响应式断点中混用固定像素宽的浮动元素和百分比父容器，容易在缩放或窗口调整时越界
containing block 和 has layout（IE）或 block formatting context（现代）的实际状态。 
