浮动元素导致父容器高度塌陷是因为其脱离文档流，父容器无法感知其存在；这是CSS规范定义的正常行为，非bug。
浮动元素为什么会让父容器高度塌陷
因为浮动元素脱离了文档流，父容器在计算高度时直接“看不见”它们，就像它们不存在一样。这不是 bug，是 CSS 规范里明确定义的行为——float 的本意就是让文字绕排，不是用来做布局的。
常见错误现象：div 包着几个 float: left 的子元素，但父 div 在开发者工具里显示高度为 0，背景色或边框都看不见。
- 只要子元素用了
float，且父容器没设置固定高度，塌陷就必然发生 -
overflow: hidden能触发 BFC，从而“包含”浮动，但这是副作用，不是设计目的 - 用
display: flow-root是更干净的解法（现代浏览器支持良好），它显式创建 BFC，不附带overflow的裁剪副作用
clear 为什么不能解决所有浮动问题
clear 只控制元素自身的位置，不修复父容器的尺寸计算逻辑。它常被误用在最后一个浮动子元素上，以为能“撑开”父容器，其实只是把那个元素下移了一段距离，父容器依然不知道上面那些浮动元素的存在。
使用场景：真正该用 clear 的地方，是需要避开上方浮动内容的独立块（比如文章末尾的版权栏、分隔线）。
立即学习“前端免费学习笔记（深入）”；
-
clear: both必须作用在浮动流之后的**另一个块级元素**上，对浮动元素自身加clear没有意义 - 在浮动子元素末尾插入
<div style="clear:both"></div>能视觉上闭合，但属于 hack，HTML 语义污染 - Flex 或 Grid 布局中完全不需要
clear，因为它根本不在浮动流里
container 宽度计算中 float 引发的精度丢失
当浮动元素宽度用百分比（如 width: 33.33%）且父容器宽度不是 3 的整数倍时，浏览器四舍五入像素会导致最后一列换行——这不是清除浮动的问题，而是浮点转整数的渲染误差。
典型表现：三列等宽浮动布局，在某些视口宽度下第三列掉到下一行，检查发现每列实际渲染宽度加起来 > 100%。
- 用
box-sizing: border-box避免 padding/border 加进宽度计算，减少误差叠加 - 改用
calc(100% / 3)比写死33.33%更可靠，现代浏览器解析更精确 - 如果必须兼容老浏览器，可给最右一列设
margin-right: -1px补偿，但属权宜之计
现代替代方案里哪些清除方式真能避免宽度计算干扰
用 Flex 或 Grid 做布局时，浮动本身就不该出现。但若遗留代码中混用浮动和现代布局，清除方式选错反而会破坏容器尺寸逻辑。
性能影响：overflow: auto 触发重绘范围更大；display: flow-root 开销最小，且不影响子元素溢出行为。
-
display: flex或display: grid的父容器，子元素即使写了float也会被忽略（规范强制），无需清除 -
float和position: absolute同时存在时，clear对绝对定位元素无效，别白费力气 - 服务器端渲染或 SSR 场景下，
display: flow-root兼容性需查 CanIUse 数据，IE11 不支持，但overflow: hidden仍可用
浮动本身没有“数学逻辑”，只有渲染行为；所谓精度问题，本质是像素对齐 + 浮点截断 + 浏览器实现差异的叠加结果。别试图用清除浮动去修正宽度，该换布局模型就换。
