为何浮动元素高度百分比在含clearfix父元素中失效，特殊布局中生效？

核心规则前提：CSS中百分比高度生效的必要条件是父元素（包含块）拥有明确的高度值（非子元素撑开的auto高度），仅table-cell/table-row等特殊布局元素除外。

1. 带clearfix的父元素为何导致浮动子元素高度百分比失效？ #

clearfix的本质是通过伪元素::after设置clear: both，强制父元素包裹住内部浮动子元素，但父元素仍属于正常文档流中的块级元素，其高度为自适应的auto值——即完全由子元素的实际高度撑开。

根据CSS规范，子元素的百分比高度需要以父元素的明确高度为计算基准，但clearfix父元素的auto高度依赖于子元素高度，形成了“子元素高度依赖父元素，父元素高度又依赖子元素”的循环依赖。浏览器无法计算出有效的百分比高度，只能将子元素高度重置为auto（由自身内容撑开）。

2. 为什么宽度百分比不受此问题影响？ #

宽度的百分比计算规则与高度完全独立：

• 正常文档流中的块级元素，默认宽度为auto，即自动填充父元素的可用宽度（父元素内容区宽度=父元素总宽度-内边距-边框）。
• 子元素的宽度百分比基于父元素的可用宽度计算，这个值是明确的（比如父元素为body时，对应视口宽度；父元素为容器时，对应容器内容区宽度），与父元素高度是否自适应无关，因此宽度百分比总能正常生效。

3. 为什么display:table和position:absolute能让高度百分比生效？ #

对于display:table的父元素 #

table元素的布局规则异于普通块级元素：CSS规范明确允许，当table元素高度为auto时，内部子元素的百分比高度可基于table的包含块（父元素的父元素或视口）高度计算。简单来说，table会自动“继承”包含块的高度作为自身的隐含基准，避免了循环依赖，让子元素的百分比高度有了计算依据。

对于position:absolute的父元素 #

绝对定位元素脱离正常文档流后，高度计算规则发生变化：

• 如果父元素设置position:absolute且未显式设置高度，但配置了top和bottom属性（如top:0; bottom:0;），父元素高度会被拉伸至等于其包含块（最近的非static定位祖先或视口）的高度，此时父元素拥有明确高度，子元素百分比高度可正常计算。
• 即使未设置top/bottom，只要父元素的包含块有明确高度，绝对定位的父元素会默认以包含块高度作为自身隐含基准，同样能让子元素的百分比高度生效。

而clearfix父元素始终处于正常文档流，高度只能由子元素撑开，无法获得明确的高度基准，因此子元素的百分比高度无法生效。

内容的提问来源于stack exchange，提问作者kayen_p