浮动元素脱离文档流导致父容器高度塌陷、尺寸计算异常及内容溢出，根本原因是CSS规范行为；应优先使用flex/grid布局，仅在图文环绕等特定场景用float。
因为浮动元素脱离文档流，父容器根本“看不见”它，自然不会为它分配高度和宽度空间——这不是 bug，是 CSS 规范里写死的行为。
父容器高度塌陷导致内容溢出
浮动子元素不参与父容器的高度计算，父容器 height 可能变成 0 或远小于预期。此时即使子元素视觉上在父容器内部，只要它实际渲染位置超出了父容器当前的 height 或 width，就会溢出。
- 用开发者工具选中父容器，看
Computed面板里的height是否异常小（比如0px） - 临时加
border: 1px solid red到父容器，直观确认是否“空壳” - 如果父容器设了
overflow: auto，但内部浮动内容超出后滚动条不出现或错位，大概率就是这个原因
浮动元素的包含块不是你写的父容器
浮动元素计算 max-width: 100% 或 width 时，参考的是它的「包含块」，而这个包含块通常是视口或最近的定位上下文，不是你 HTML 里写的那个直接父级。
- 哪怕父容器写了
width: 300px，浮动图片仍可能按视口宽度渲染（如1920px），直接冲出边界 -
overflow: hidden能让父容器“撑高”，但对浮动元素自身的尺寸约束无效 - 必须同时满足：父容器创建 BFC（如
display: flow-root）＋ 显式设置父容器width（如width: 100%）
总宽度超限引发“掉队”式溢出
多个浮动子元素横向排列时，“掉队”不是清除问题，而是宽度算错了——只要总和（width + padding + border + margin）比父容器可用宽度多 1px，最后一个就会被挤到下一行，视觉上像冲出了右边界。
立即学习“前端免费学习笔记（深入）”；
- 用 DevTools 的
Computed面板逐个核对每个浮动子元素的实际占用尺寸 - 确认是否漏了
box-sizing: border-box，否则padding和border会额外加宽 - HTML 中两个浮动
<div>之间若有换行或空格，会被解析为约4px的间隙（font-size: 16px下），建议写成紧凑格式：<div></div><div></div>
别再依赖 float 做布局
浮动本就不是为现代响应式布局设计的。它带来的高度塌陷、包含块错乱、宽度敏感等问题，本质上是用错场景。
-
display: flex或display: grid天然不依赖文档流高度计算，无需清除、无塌陷、尺寸约束明确 - 图文环绕等真正需要绕排的场景，才该用
float配合shape-outside -
display: flow-root是目前最干净的 BFC 触发方式，但 Safari 15.4 之前需降级；::after伪元素 clearfix 兼容性最好，副作用最小
真正难处理的不是“怎么清浮动”，而是当浮动混在 legacy 代码里，又叠加了 transform、position: absolute 或 overflow: hidden 时，裁剪和定位上下文会层层干扰——这时候得一层层查 computed styles，而不是只盯着一个 class 改。
