float 会导致父元素高度塌陷，因其脱离文档流；overflow:hidden 通过触发BFC解决但会裁剪溢出内容；推荐使用display:flow-root，无副作用；现代布局应优先选用flex或grid。
float 会让父元素高度塌陷，这是必然结果
是的，float 会让父元素高度塌陷——只要父容器里**只有浮动子元素**，且没有其他非浮动内容（比如文字、display: block 元素），它的 height 就会计算为 0。这不是 bug，是 CSS 规范行为：浮动元素脱离普通文档流，父容器在布局时“看不见”它们的高度。
为什么 overflow:hidden 能“修好”高度？
因为 overflow: hidden（或 auto、scroll）会触发 BFC（块级格式化上下文），而 BFC 的一个关键特性就是：它会包含内部浮动元素的高度，强制父容器重新感知并包裹子项。
- ✅ 简单有效，一行 CSS 就能解决
- ⚠️ 副作用明显：溢出内容会被裁剪，比如下拉菜单、tooltip、绝对定位子元素超出父边界时直接消失
- ⚠️ 在响应式场景中可能意外触发横向滚动条（尤其配合
white-space: nowrap时）
现代项目该用 display: flow-root 还是 clearfix？
display: flow-root 是目前最干净的解法，它是专为解决浮动塌陷设计的 CSS 属性，语义明确、无副作用、不干扰溢出行为。
- ✅ 推荐写法：
.container { display: flow-root; } - ✅ 不影响子元素
position: absolute的定位范围，也不裁剪内容 - ❌ 兼容性：不支持 IE（但截至 2026 年，IE 已退出主流开发场景）
- ? 若需兼容老浏览器，用
clearfix更稳妥：.clearfix::after { content: ""; display: table; clear: both; }再给父元素加class="clearfix"
真正该问的是：你真的需要 float 做布局吗？
浮动本就不是为页面整体布局设计的——它最初只用于文字环绕图片。现在用 float 做两栏、三栏、导航栏，等于主动引入塌陷、垂直居中失效、z-index 异常等一系列连锁问题。
立即学习“前端免费学习笔记（深入）”；
- ✅ 替代方案：用
display: flex或display: grid，父容器高度自动适应，无需清浮动、无塌陷、响应式天然友好 - ⚠️ 注意：一旦用了
flex或grid，float就不该再参与布局逻辑；继续混用会导致不可预测的行为 - ? 浮动唯一还值得保留的场景：图文混排中的
img左右浮动 + 文字环绕
clear: both 必须作用在**浮动元素之后、父容器内部的最后一个渲染节点上**——写在浮动元素自己身上，或者写在父容器外部，都完全无效。 
