浮动元素脱离文档流致父容器高度塌陷，内容溢出；应通过display: flow-root触发BFC（推荐）、overflow: hidden/auto（传统）或::after伪元素clearfix清除浮动。
浮动元素撑不开父容器，导致内容溢出
当子元素使用 float: left 或 float: right 时，它会脱离文档流，父容器高度坍缩为 0（除非有其他非浮动内容撑高）。如果父容器设置了固定高度或 overflow: auto，而内部浮动内容实际超出可视区域，浏览器就可能错误地渲染滚动条——不是因为内容真超出了父容器边界，而是因为父容器“不知道”自己该有多高。
常见现象：div 包裹几个 float: left 的卡片，父容器右侧突然出现横向滚动条，或内部纵向滚动条无法滚动到底部。
- 检查父容器是否缺失清除浮动机制（如未设置
overflow: hidden、display: flow-root或伪元素清除） - 用开发者工具选中父容器，看 computed height 是否为 0 或远小于预期
- 临时加
border: 1px solid red到父容器，直观确认是否高度塌陷
overflow: auto 遇到浮动子元素时的判定逻辑缺陷
浏览器在计算 overflow: auto 是否触发滚动条时，会基于「包含块的尺寸」和「内容盒的实际占据范围」做比较。但浮动元素不参与父容器的高度计算，导致「内容实际占据范围」被低估——尤其当浮动元素后面还跟着普通流内元素时，布局顺序混乱会让这个判断更不可靠。
典型场景：左侧浮动导航栏 + 右侧 margin-left 的主内容区，主内容区设了 overflow: auto，但滚动条始终不出现或只在鼠标悬停后才闪现。
立即学习“前端免费学习笔记（深入）”；
- 避免对含有浮动子元素的容器直接设
overflow: auto；优先改用display: flow-root（现代方案）或overflow: hidden（传统清除） - 若必须保留
overflow: auto，请确保父容器已通过display: flow-root或伪元素（::after { content:""; display:table; clear:both; }）建立 BFC - 注意 Safari 对
flow-root的支持从 v15.4 开始稳定，旧版需降级处理
清除浮动的方式选错，反而加剧滚动异常
用 clear: both 放在浮动元素之后的空 div 上，看似能撑高父容器，但如果该 div 本身被设了 height: 0、visibility: hidden 或 font-size: 0，它仍可能无法正确参与高度计算，导致父容器依然塌陷——此时滚动条行为更难预测。
错误示例：<div class="clearfix"><div class="float-left"></div><div class="float-right"></div><div style="clear:both; height:0; overflow:hidden;"></div></div>
- 清除浮动推荐优先用
display: flow-root（无副作用，不引入额外 DOM） - 若用伪元素清除，确保
::after的display是block或table，且未被visibility: hidden或opacity: 0干扰 - 避免给清除节点设
height: 0+line-height: 0等组合，某些浏览器下会跳过其布局贡献
Flex/Grid 替代浮动后仍出现滚动条？检查隐式最小尺寸
很多人以为换成 display: flex 就万事大吉，但 flex-item 默认有 min-width: auto（行内轴）和 min-height: auto（交叉轴），在容器空间不足时可能强制撑开，意外触发父容器的 overflow 行为——这看起来像“浮动遗留问题”，实则是新布局模型的约束逻辑不同。
比如 flex-direction: row 下多个等宽子项，在窄屏中因 min-width: auto 拒绝收缩，导致父容器溢出并出现横向滚动条。
- 对 flex 子项显式设
min-width: 0或min-height: 0，解除默认最小尺寸限制 - Grid 布局中同理，注意
minmax(0, 1fr)替代1fr可防止溢出 - 不要假设“不用 float 就不会滚动”，BFC、尺寸约束、溢出策略三者始终耦合
浮动本身已被 CSS WG 标记为 legacy，但线上大量老代码仍在运行。真正棘手的不是“怎么清浮动”，而是清除之后，父容器的 BFC 边界、尺寸计算时机、与 overflow 的协同是否被完整覆盖——漏掉任意一环，滚动条就可能出现在最不该出现的地方。
