clear: both对position: absolute无效，因其脱离文档流、不参与浮动和BFC高度计算；overflow: hidden仅强制渲染父容器盒模型，不解决高度塌陷，且可能裁剪内容、影响滚动。
为什么clear: both对position: absolute完全无效
因为clear只作用于浮动（float）元素，而position: absolute根本不是浮动——它彻底脱离文档流，既不触发clear逻辑，也不参与BFC高度计算。你给父容器加.clearfix::after { clear: both; }，它会照常渲染，但对absolute子元素的尺寸“视而不见”。DevTools里能看到伪元素存在，但父容器offsetHeight还是0，这就是典型误用。
显式设置height或min-height能用，但得看场景
直接写height: 300px确实能撑开父容器，但它和absolute本身无关，只是强行覆盖了height: auto行为。是否可用，取决于三点：
- 内容高度是否固定不变（比如图标+单行文字，且无响应式缩放）
- 父容器是否被其他样式（如
max-height、overflow: hidden）截断 - 是否在JS中动态修改了
absolute子元素的top/bottom，却忘了同步更新父容器height
如果子元素靠bottom: 0定位，而你只设min-height: 200px，那在小屏幕上可能留白，在大屏幕上又溢出——这不是代码错，是语义错配。
overflow: hidden为什么看起来“有用”，其实危险
有人发现加了overflow: hidden后父容器背景色展开了，误以为它“修复”了塌陷。其实它只是创建了一个新BFC，让父容器自身盒模型被强制渲染（比如边框、背景），但absolute子元素依然没被计入高度计算——getBoundingClientRect().height读出来还是不对，下方兄弟元素仍可能上移。更麻烦的是：
立即学习“前端免费学习笔记（深入）”；
- 所有超出父容器范围的
absolute内容（如下拉菜单、tooltip）会被真裁剪，不是隐藏 - 配合
transform或z-index时，可能意外改变层叠上下文 - 在移动端，
overflow: hidden有时会禁用惯性滚动，影响体验
真正要问自己的问题，不是“怎么撑开”，而是“该不该撑开”
很多塌陷问题最后都卡在这一步：你把一个装饰性徽章、一个全屏遮罩、一个画布上的控制按钮，硬塞进一个本该承载正文的div里，再拼命用JS算getBoundingClientRect().bottom去反推高度。结果代码越写越多，响应式一改就崩。关键不是技术多难，而是得先确认：absolute子元素在交互职责和视觉层级上，是不是真的属于这个父容器的内容流？如果不是，就别让它“撑高”——换容器、提级定位、或者用position: relative + transform保持流内参与。
