问题根源是浮动元素脱离文档流导致父容器高度塌陷为0；推荐用display: flow-root创建BFC来闭合，语义清晰无副作用；若需兼容IE则应弃用float改用flex或grid。
父容器高度为0就是问题根源
浮动元素脱离文档流后，父容器无法感知其高度，直接塌陷成 0 —— 浏览器开发者工具里一悬停就能确认。你看到的“底部留白”，其实是后续内容（比如 footer）从这个塌陷后的 0 高度位置开始渲染，视觉上像掉进了空白里。
这不是 margin、padding 或字体基线导致的假象，是真实的高度缺失。别在子元素上瞎调 display: block 或 vertical-align，那没用。
用 display: flow-root 闭合最干净
这是专为解决此问题设计的值，语义清晰、无副作用：不裁剪溢出内容，不意外触发滚动条，也不影响层叠上下文。
-
display: flow-root会创建一个 BFC，让父容器重新包含浮动子元素的高度 - 兼容性已足够好：Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+
- IE 完全不支持，但若需兼容 IE，应整体放弃 float 布局，而非硬套 hack
示例：
.container { display: flow-root; }
立即学习“前端免费学习笔记（深入）”；
overflow: hidden 能用但要盯住裁剪风险
它通过触发 BFC 间接解决问题，但副作用明显：任何超出父容器的内容（比如 position: absolute 的提示框、横向滚动图表）会被直接截断。
- 慎用
overflow: auto：内容稍一溢出就弹滚动条，体验突兀 -
overflow: clip更精准，但 Safari 15.4 之前、所有 IE 都不支持 - 如果父容器本身有圆角或阴影，
overflow: hidden还可能把它们也裁掉
伪元素清除法失效？大概率漏了 display: block
::after 默认是 inline 级，而 clear: both 只对块级元素生效。很多人只写：
.clearfix::after { content: ""; clear: both; }
却忘了加关键一行：
- 必须显式设
display: block（或table） - 推荐完整写法：
.clearfix::after { content: ""; display: table; clear: both; } - 如果父容器用了
transform或will-change，某些旧版 Chrome 中伪元素可能不触发 BFC，此时优先换flow-root
真正难的不是选哪个 CSS 属性，而是判断浮动是否还该存在——图文环绕场景保留 float 没问题，但只要它被用于整体布局（如多栏、列表网格），就该立刻迁移到 display: flex 或 display: grid。那些“清浮动”的代码，本质上是在给过时方案打补丁。
