父元素无法被浮动子元素撑开高度是 css 浮动机制的原始设计行为，因浮动元素完全脱离普通文档流，父容器布局时忽略其尺寸；现代开发应优先使用 flex 或 grid 布局替代 float。
父元素无法被浮动子元素撑开高度，不是 bug，是 CSS 浮动机制的原始设计行为——float: left 或 float: right 的元素会**完全脱离普通文档流**，父容器在布局计算阶段根本不会把它们的高度纳入考量范围。
浮动元素为什么会让父容器 height 计算为 0
只要子元素设置了 float: left 或 float: right，它就从文档流中被抽离。父容器执行 height: auto 时，只看“还在流里”的内容：比如纯文本、未浮动的 <div>、<code>inline 元素。哪怕你给浮动子元素写了 height: 300px，父容器也视而不见。
-
min-height和width: 100%都无效——前者依赖内容撑高，后者只影响水平方向 -
clear: both加在父容器上完全没用，因为clear只对参与同一浮动上下文的兄弟元素起作用 - 开发者工具里看到父容器
height是 0、背景色不显示、后续元素“叠”上来，都是同一症状
为什么 overflow: auto 看似有效但容易误用
overflow: auto 本身不“撑高”父容器，而是通过触发 BFC（块级格式化上下文），让父容器**包含浮动子元素的盒模型尺寸**。但它生效有三个硬性前提：
- 父容器不能设置
height或max-height（否则高度被锁死） - 子元素确实用了
float: left或float: right（position: absolute不在此列） - 父容器原
overflow值不能是visible（因为visible不触发 BFC）
最常被忽略的副作用是：overflow: auto 会裁剪所有超出父容器的内容，比如 position: absolute 的下拉菜单、带负 margin 的装饰元素、动画中移出边界的弹窗——不是“没效果”，而是“效果太强”。
现代项目里更该盯住的其实是“要不要用 float”
如果你正新建页面或重构模块，优先考虑 display: flex 或 display: grid。它们天然不脱离文档流，父容器高度自动包含子项，clearfix 和 overflow 都不需要。
-
flex在 IE10+ 支持良好；grid在 Chrome 64+/Firefox 58+/Safari 15.4+ 已稳定 - 一旦父容器设了
display: flex，子元素上的float属性会被浏览器直接忽略 - 混用
float和flex/grid不仅多余，还会增加调试成本——比如float失效后你还以为是清除没做好
真正卡住的点，往往不是代码写得对不对，而是没确认子元素是否真的在浮动——打开开发者工具，看 computed 样式里的 float 值是不是 none。
