clear属性仅对文档流内的块级元素生效，无法影响绝对定位元素的高度计算；父容器高度仅由普通流元素、浮动元素及bfc内容决定，absolute子元素不参与任何高度计算。

clear属性只对浮动元素起作用

clear 的设计目标非常明确：控制一个**参与文档流的块级元素**，使其不与前面的 float 元素同行。它不是用来“感知”或“拉高”父容器的工具，更不处理脱离文档流的行为。

当你给父容器加 clear: both，或者在子元素上写 clear: both，它都不会让父容器重新计算高度——因为 position: absolute 子元素压根不在文档流里，clear 根本“看”不到它。

• clear: both 写在父容器上：父容器自己没浮动，这条声明完全被忽略
• clear: both 写在绝对定位子元素上：它会尝试换行，但该元素已脱离流，换行无效，且不影响父高
• .clearfix::after 里加 clear: both：伪元素确实会被清除，但它清除的是浮动，不是绝对定位；父容器依然“看不见”那个 position: absolute 元素

absolute 子元素不参与任何高度计算路径

父容器计算高度时，只考虑以下几类内容：

• 普通流内块级元素（如 div、p）的 margin/border/padding/content
• 浮动元素（前提是它们没被 clear 推下去太远，且父容器能“感知”到）
• BFC 边界内的内容（但 position: absolute 不属于 BFC 内容，它层叠在 BFC 之上）

getBoundingClientRect().height 读出来的是渲染后几何区域，不是 layout flow 高度；offsetHeight 和 scrollHeight 也都不会包含 position: absolute 子项——这不是浏览器 bug，是规范行为。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

为什么有人觉得 overflow: hidden “有用”？

加了 overflow: hidden 后，父容器背景色/边框有时“看起来”展开了，但这只是因为它触发了 BFC，强制自身盒模型被完整绘制，并非高度被撑开。

• offsetHeight 仍可能为 0（如果内部没有其他流内内容）
• 下方兄弟元素依然会上移，证明父容器实际高度未被修正
• position: absolute 子元素若超出父范围，会被真裁剪——这不是修复，是掩盖问题
• 移动端可能因此禁用惯性滚动，transform 或 z-index 层叠顺序也可能意外改变

真正要问的不是“怎么撑”，而是“该不该撑”

很多塌陷问题最后卡在语义误用上：把一个装饰性徽章、全屏遮罩、画布控制按钮，硬塞进一个本该承载正文的 div 里，再用 JS 反复算 getBoundingClientRect() 去同步高度。

• 如果子元素视觉上在右上角，但逻辑上不属于父容器的内容流，就别让它“撑高”父容器
• 优先考虑 position: relative + transform: translate() 保留流内参与
• 或改用 display: flex / grid 对齐（如 justify-content: flex-end; align-items: flex-start）
• 实在要用 absolute，就显式设 min-height，但得确认内容高度是否固定、是否响应式、是否被 max-height 或 overflow 截断

关键不是技术能不能绕过去，而是这个 position: absolute 元素，到底是不是父容器该负责的布局职责范围。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！