根本原因是每层浮动父容器因子项脱离文档流而高度塌陷，导致 overflow 区域误判；须为每一层浮动父容器单独触发 BFC（如 display: flow-root），并注意盒模型、空白间隙等隐性溢出源。
多层浮动嵌套导致滚动条异常的根本原因
不是“浮得太多”，而是每层父容器都因浮动子项脱离文档流而高度塌陷，浏览器在计算 overflow 区域时，把塌陷后“0 高度”的容器当成溢出源——尤其当某层设了 overflow: auto 或 overflow: hidden，就会误触发滚动条。常见现象包括：横向滚动条凭空出现、纵向滚动条卡住、body 宽度随滚动条显隐跳动。
逐层触发 BFC 是最稳的修复方式
必须为**每一层**包含浮动子项的父容器单独建立块级格式化上下文（BFC），不能只清最外层。BFC 能让容器正确包裹浮动后代，避免高度坍缩，也就断掉了滚动条误判的源头。
-
display: flow-root是首选：单行声明、无裁剪副作用、不引入额外 DOM；Chrome 64+ / Firefox 59+ / Safari 15.4+ 均支持 - 兼容旧环境可退回到
overflow: hidden，但要确认它不会意外裁剪下拉菜单、tooltip 或 box-shadow - 避免用
float: left或position: absolute触发 BFC——会改变元素定位行为，引发新布局问题
清除浮动写法错一层，滚动条就抖一层
很多人在最内层加一个 clear: both 的空 <div>，结果外层容器依然塌陷。因为 clear 只影响同层流内兄弟元素，无法向上“通知”父容器“我有内容”。
- 伪元素清除必须作用于每一层浮动父容器自身：
.sidebar::after { content: ""; display: table; clear: both; } - 不要写成全局规则如
*::after，否则可能干扰非浮动结构 - 手动插入
<div style="clear:both"></div>容易遗漏、难维护，且若该 div 被设了height: 0或font-size: 0，仍无法撑高父容器
盒模型和空白间隙常被当成“浮动问题”掩盖
即使 BFC 正确建立，滚动条还可能出现，大概率是父容器的 padding/border 没计入宽高，或 HTML 中浮动元素间的换行/空格被渲染成 4–8px 间隙，多层叠加后横向直接溢出。
立即学习“前端免费学习笔记（深入）”；
- 统一加
* { box-sizing: border-box; }，堵住最隐蔽的宽度超限口子 - 浮动项之间不要留换行或空格；或给父容器设
font-size: 0，再在子项里重设字体大小 - 临时加
outline: 1px solid red到各层父容器，一眼看出哪一层真“凸出来”了
真正容易被忽略的是：多层浮动嵌套中，每层塌陷都是独立事件，修复必须逐层落位，而不是寄希望于一个“全局清除”技巧一劳永逸。
